CSS height of divs not correct - html

Question

I am trying to produce the following, basically a page broken six pieces
__________
| | | |
| | | |
|__|__|__|
| | | |
| | | |
| | | |
----------
But what I'm getting looks like this:
__________
|__|__|__|
|__|__|__|
| | | |
| | | |
| | | |
| | | |
----------
Here is the css:
.paginationPage {
height: 110px;
width: 82px;
margin: 2px;
background: #F9F9F9;
border: 1px solid #CCCCCC;
}
#insertionGrid {
position: relative;
height: 100%;
width: 100%;
}
#odds, #evens {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#odds {
z-index: 1;
}
#evens {
z-index: 2;
}
.insertionBlock {
float: left;
}
.oneSixth {
height: 50%;
width: 33%;
}
.oneEigth {
height: 25%;
width: 50%;
}
And here is the HTML:
<div class="paginationPage">
<div id="insertionGrid">
<div id="odds">
<div>
<div id="o1" class="oneSixth insertionBlock"> </div>
<div id="o2" class="oneSixth insertionBlock"> </div>
<div id="o3" class="oneSixth insertionBlock"> </div>
</div>
<div>
<div id="o4" class="oneSixth insertionBlock"> </div>
<div id="o5" class="oneSixth insertionBlock"> </div>
<div id="o6" class="oneSixth insertionBlock"> </div>
</div>
</div>
</div>
</div>
paginationPage is 110px and inside things are height 100%, except oneSixth class which is 50%. So why is the oneSixth div taking up something like 10% not 50%?

Answer 1

You have the right idea. You just need to get rid of the <div> tags around o1,o2,o3 and around o4,o5,o6. The o divs will automatically fit and fill into the second row, so you don't need them. If you have those div tags in there, you are fitting your o1,o2,o3 to it's parent div, and that's why they get smaller than you think they should.
See for a working example. I added a border so it's easier to see.
http://jsfiddle.net/WD79x/1/

Answer 2

Here's one method, using position:absolute.
Demo
HTML
<div class="paginationPage">
<div id="insertionGrid">
<div class="top">
<div id="o1" class="oneSixth insertionBlock"> </div>
<div id="o2" class="oneSixth insertionBlock"> </div>
<div id="o3" class="oneSixth insertionBlock"> </div>
</div>
<div class="bottom">
<div id="o4" class="oneSixth insertionBlock"> </div>
<div id="o5" class="oneSixth insertionBlock"> </div>
<div id="o6" class="oneSixth insertionBlock"> </div>
</div>
</div>
</div>
CSS
.paginationPage {
height: 110px;
width: 82px;
margin: 2px;
background: #F9F9F9;
border: 1px solid #CCCCCC;
position:relative;
}
.oneSixth {
width:33.33333%;
position:absolute;
}
.top .oneSixth:nth-child(even),
.bottom .oneSixth:nth-child(odd) {
background-color:red;
}
.top .oneSixth:nth-child(odd),
.bottom .oneSixth:nth-child(even) {
background-color:blue;
}
.oneSixth:nth-child(1) {
left:0;
}
.oneSixth:nth-child(2) {
left:33.33333%
}
.oneSixth:nth-child(3) {
right:0
}
.top .oneSixth {
top:0;
bottom:50%;
}
.bottom .oneSixth {
top:50%;
bottom:0;
}

Answer 3

#Brian Ray was right.
"However, I'm going to guess that it has to do with the container of the .oneSixth divs having no height set. Since percentage heights are based on the heights of their parents, the s with no class should have their heights set to 50% and the .oneSixth divs should have their heights set to 100%."