How to inherit height in div? - html

Question

I'm learning basic HTML 5 and CSS by myself, and I've been using div instead of table as recommended by many bloggers and web developers. But now I'm with this question:
I'm trying to make a table looks like this:
(source: webdesign-gm.co.uk)
Using this code:
CSS
.table {
font-size:14px;
border-style:solid;
border-width:2px;
margin:0;
padding:3px;
text-align:center;
vertical-align:middle;
display:table-cell;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;}
HTML
<div align="center">
<div id="row1">
<div class="table" style="min-width:500px;max-width:500px;">Random Number: <?php echo $gRandNum; ?></div>
</div>
<div id="row2" style="min-height:140px;">
<div id="row2column1" style="float:left;">
<div id="row2column1row1">
<div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;">test1</div>
</div>
<div id="row2column1row2">
<div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;">test2</div>
</div>
</div>
<div class="table" style="border-top-style:none;min-width:350px;">
test3<br>test3<br>test3<br>test3<br>test3<br>test3
</div>
</div>
<div id="row3" style="width:500px;">
<div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
</div>
http://jsfiddle.net/XxRJe/2/
The row2 was supposed to have 2 columns inside of it. And the first column divided in another 2 rows, and each row would have 50% of the row2 height. But that is what is not happening. How do I fix it?
Basically, I want two columns, and the first divided in 2 rows, but I have no idea on how to set it.

Answer 1

Hi check this code i tried to fix your problem http://jsfiddle.net/XxRJe/13/. To handle heights on divs with % you need to be carefull because to make it work all his parents need to have a height on % or px to set it.
Here the css
.table {
font-size:14px;
border-style:solid;
border-width:2px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
}
#row2 {
height:300px;
width:500px;
}
#row2column1, #row2column2 {
width:50%;
height:100%;
color:#fff;
background-color:#000;
}
#row2column1 .celd{
height:50%;
background-color:#666;
}
and HTML
<div>
<div id="row1">
<div class="table" style="min-width:500px;max-width:500px;">Random Number:<?php echo $gRandNum; ?></div>
</div>
<div id="row2" style="min-height:140px;">
<div id="row2column1" style="float:left;margin:auto;">
<div id="row2column1row1" class="celd">
<div class="celd">test1</div>
</div>
<div id="row2column1row2" class="celd">
<div class="celd">test2</div>
</div>
</div>
<div id="row2column2" style="float:right">
test3<br>test3<br>test3<br>test3<br>test3<br>test3
</div>
</div>
<div id="row3" style="width:500px;">
<div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
</div>
</div>
If you need some more complex elements you have to play with % an dinamic heights.
An additional tip don´t set styles inline make it all in the css file