Changing from table layout to div layout - html

Question

Okay, so I know it's frowned upon to use tables for layout, so I tried using DIVs etc, and got myself completely tangled in knots and without managing to achieve the layout I needed - and thus resorted back to a table.
The layout's actually relatively simple, but it seems there's a couple of features that make it a little tricky (for me at least) in CSS.
There are just 2 rows. The top row has two cells of equal width. These contain text, and should automatically resize to the correct height.
The other row contains an iframe. It should be the full width of the container, and take up the remaining container height.
I tried a few approaches, including using CSS like display:table-cell etc, but because my second row would require colspan="2" that simply does not work. Using floating divs doesn't seem to work very well either, because how do I get my second row - I don't want to have to resort to absolute positioning, because then I'd have to assume a fixed height for the top row.
Any CSS experts out there who can get me on the right track?
Here's an example demonstration what I currently do using a table (jsfiddle link below).
HTML...
<div id="cont">
<table>
<tr height="1%">
<td><p>How would you do this with DIVs / CSS?<br />
Some text. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod
</p></td>
<td><p>Some more text.<br />
These two cells have indeterminate size.<br />
They should only take up the minimum height.
</p></td>
</tr>
<tr>
<td colspan="2">
<div id="iframe">
An iframe will go here.<br />
I'm just using a div for
illustrative purposes.
</div>
</td>
</tr>
</table>
</div>
CSS
#cont {
position: absolute;
left: 4px;
right: 4px;
top: 4px;
bottom: 4px;
}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: top;
}
#iframe {
width: 100%;
height: 100%;
border: 1px solid green;
}
http://jsfiddle.net/z8qum850/

Answer 1

This is very easy to do with CSS. Something like the following would give what you asked about:
HTML
<div id="wrapper">
<div id="row1">
<div id="first-cell"></div>
<div id="second-cell"></div>
</div>
<div id="row2"></div>
</div>
CSS
div {
border:1px solid black;
}
#wrapper {
height:auto;
width:100%;
}
#row1 {
display:table;
width:100%;
}
#first-cell,#second-cell {
display:table-cell;
height:200px;
}
#row2 {
width:100%;
height:200px;
display:block;
}
Using display:table and table-cell, the child div elements will automatically fill the width, but you need to use a wrapper to keep them contained. So, if you were to remove the width declaration on the #wrapper element, you'd collapse everything because the child elements don't know how much space to fill. Here's a CodePen demo showing the result of the code.