Auto div height across columns in responsive grid

Question

I have added a JSfiddle for a responsive grid I am making: http://jsfiddle.net/dankellaway/FUSfs/1/

Each column half has varying amount of text. I want the columns of both divs to have the same height. Both halves are within a container div. How do you make them the same size without having to set as a fixed height? I want both to expand in height regardless of the amount of text in either div. Thanks.

Code:

CSS

#page {
width:95%;
text-align:center;
margin:auto;
}
#row {
height:100%
}
#container {
height: auto;
}
#header {
width:100%;
background-color: rgb(0, 143, 213);
height:50px;
}
#full {
width:99%;
margin:0.5%;
background-color:blue;
}
#half {
width:48%;
margin:0.5%;
padding:0.5%;
float:left;
background-color:yellow;
height:100%;
}
#third {
width:32.333%;
float:left;
margin:0.5%;
background-color:blue;
}
#quarter {
width:23%;
margin:0.5%;
padding:0.5%;
float:left;
background-color:blue;
height:100px
}

HTML

<div id="container">
<div id="half">
    <h1>Half 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div id="half">
    <h1>Half 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.      

</div>
</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="third">Third</div>

Answer 1

I am not sure there's a way to fix this without a set height. But if you want to guess the average height, I would add a min-height to .half, which allows it to grow as needed.

#half { min-height: 450px; }

And you'd probably need a clear:both; div in between sections.

Answer 2

just set your #container to display: table-row;

#container {
    height: auto;
    display: table-row;
}

Answer 3

If you don't mind removing float:left on your #half divs you can use display:table-cell on them to make them stretch to the right height.

I updated your fiddle to illustrate: http://jsfiddle.net/FUSfs/3/