I would like to have a cell go across two columns with two cells below it. How do I do this in CSS with <div> elements? It should be equivalent to:
<table>
<tr>
<td colspan="2">Major column</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
Please note that C1 and C2 are not necessarily going to be 50% each. The value may change depending on their contents. I also need all items in those cells no matter how many rows there are to line up just like they would in a table.
The above is not possible in a cross browser way, without using a table (You can simulate table layout with CSS: “display: table”, but that doesn’t work in IE6 or IE7).
I would suggest you think a bit differently when designing with CSS instead of tables, it’s not possible to just replace “tr” and “td” with “div” and make things magically work like they used to. I suggest you set the widths of the bottom “cells”, and use one of the options people have given you above.
Hope that helps!