How do I span columns with a div based table?

Question

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 tags? It shoudl be equivalent to:

<table>
  <tr>
    <td colspan="2">Major column</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
</table>

EDIT

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.

Answer 1

You would want markup like:

<div class="main">
    <div class="topRow">Major column</div>
    <div class="leftCol">C1</div>
    <div class="rightCol">C2</div>
<div>

And then some css to position them:

div.topRow {
  width:100%;
  clear:both;
}
div.leftCol {
  width:50%;
  float:left;
}
div.rightCol {
  width:50%;
  float:right;
}

Answer 2

Take a look at layouts.ironmyers.com for some ideas.

Answer 3

I would recommend putting them in a container div if being used for layout.

HTML:

<div> full width </div>
<div class="column50"> left </div>
<div class="column50"> right </div>

CSS:

div.column50 {
    float: left;
    width: 50%;
}

In case it's unclear, there's no need to create two separate CSS classes for this case. Both of the last two divs have a 50% width, no margin, and no padding. Setting them both to 50% width and left float has the same effect as setting the right one with a right float instead.

Answer 4

All of the above will work, but keep in mind that elements will "escape" from their parent div in IE6. This is a pain, but IE6 support is still something most people need to think about.

The solution to escaping is to give the containing element a height or width (any will do, it will stretch to fit so usually 1% is what I use.).

Also, if setting widths, keep in mind that any borders or margin you set are in addition to the width of the elements, so if you set two divs at 50% with a border or margin, you will get a line break.

Answer 5

"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!