Formatting div height in grid - css

Question

I have this link to my jsfiddle code
I am trying to format the columns of the grid to have the same height on both sides and other grids to line up correctly underneath. In this example the half column has more info (the heights are different). I want the other half to have the same height. Is this achievable?
Thanks, the code is as follows:
<style>
#page {
width:95%;
text-align:center;
margin:auto;
}
#row {
height:100%
}
#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: 50%;
}
#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:200px
}
</style>
<div id="page">
<div id="full">FULL</div>
<div id="half">
<h1>Half</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</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.</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="row">
<div id="half">Half
<br>test</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
</div>

Answer 1

I'm not sure how this would affect your intended styling overall, but assigning a fixed pixel height to your #half divs rather than a percentage will force them to be the same height.
#half {
width:48%;
margin:0.5%;
padding:0.5%;
float:left;
background-color:yellow;
height: 300px;
}
Update
I dug a little deeper and found that
"The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'. A percentage height on the root element is
relative to the initial containing block." Source
So basically, you have 2 options.
1) As I originally suggested, assign a fixed pixel height rather than a percentage.
2) Assign a fixed pixel height to the #page div. Your #half divs can now use percentages, which will measue based off of the #page div. For example:
#page {
width:95%;
text-align:center;
margin:auto;
height:1000px
}
#half {
width:48%;
margin:0.5%;
padding:0.5%;
float:left;
background-color:yellow;
height: 50%;
}
Will result in your #half divs being ~500px (not including margin and padding) 505px. The extra 5 pixels being the 0.5% padding that is also calculated from the #page height.