Html/Css: Making Two Floating Divs the Same Height

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Make floating divs the same height

You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:

#wrapper {
    display: table; // See FelipeAls comment below
    width: 300px;
}

#left {
    display: table-cell;
    width: 50px;
    background: blue;
}

#right {
    display: table-cell;
    width: 250px;
    background: red;
}

Two floating divs side by side, same height

If you know that one of the two columns is always going to be taller than the other, then you can do something like this:

demo

Just give position: absolute to the shorter column and make it stretch from top: 0 to bottom: 0.

HTML:

<div class='container'>
    <div class="containerLeft">
        <h2>1.</h2>
        <p>First, let's play a video.</p>
    </div>
    <div class="containerRight">
        <img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" />
    </div>
</div>​

CSS:

.container { position: relative; }
.containerLeft { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
    background-color: crimson;
}
.containerRight { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
    background: dodgerblue;
}​

If you don't know for sure which one of them is going to be taller, then you can simulate the fact that they are of equal height by using a background gradient on their parent.

demo

HTML is the same, CSS becomes:

.container {
    overflow: hidden;
    background: -webkit-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -moz-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -o-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: linear-gradient(left, crimson 42%, dodgerblue 42%);
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​

However, CSS gradients don't work in IE9 and older, so if you want a solution for IE8+, then you can try this

demo

which uses :before and :after pseudo-elements.

.container {
    overflow: hidden;
    position: relative;
}
.container:before,.container:after {
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    content: '';
}
.container:before {
    left: 0;
    width: 42%;
    background: crimson;
}
.container:after {
    right: 0;
    width: 58%;
    background: dodgerblue;
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    z-index: 2;
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​

float left and right make 2 column to be same height

When using percent for height, also the ascendants need a height, all the way to the html, unless one have a fixed height, i.e. viewport units vh, shown in sample 2

Sample 1, with height: 100% on the html, body

html,body {  height: 100%;}
.wrap {  height: 100%;  overflow: hidden;  width: 400px;}
.left {  float: left;  width: 50%;  background: #fafafa;  text-align: center;}
.right {  float: right;  background: white;  width: 50%;  text-align: center;  height: 100%;}

<div class="wrap">  <div class="left">    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>
  </div>  <div class="right">right content is not</div></div>

.wrapper {
    display: table;
    ...
}
.wrapper .column {
    display: table-cell;
    ...
}

   body{    margin: 0;}
.area-header{    height:40px;    background-color:#71A4C3;    margin-bottom: 20px;    margin-left:20px;    margin-right:20px;}
#area-wrapper{    overflow: hidden;    width: 100%;}  
.area-menu, .area-content{    float:left;    padding-bottom: 500em;    margin-bottom: -500em;}
.area-menu{    width: 200px;      background-color:#8BC6EA;}
.area-content{    width: 400px;      background-color: LightSlateGrey;  }

<body>    <div id="area-header" class="area-header">        <h2>A Web Application!</h2>    </div>    <div id="area-wrapper">        <div id="area-menu" class="area-menu">            <ul id="menu">                <li id="menu-item"><a href="#" onclick="return false">@item.Title</a></li>            </ul>        </div>        <div id="area-content" class="area-content">            <div style="height:200px;background:red;"></div>        </div>    </div></body>

.jumbotron {
    width: 100%;
    overflow: hidden;
    background-color: white;
    padding: 30px;
    font-size: 0;
}
.jumbotron > div {
    display:inline-block;
    vertical-align: top;
    font-size: 1rem;
}
.text {
    width: 20%;
}