A Two Column Layout for Modern Browsers

Using {display:table;} for Equi-length Columns

This only works in modern, standards compliant browsers. It does not work in IE≤7. I made this demo because an awful lot of people blame CSS for what is actually a shortcoming of the majority browser.

The complaint runs along the lines of, Why can't I make both columns the same length, like I can with tables? The answer is, you can if you don't have to make it work in IE. Since making it work in IE is usually a requirement, web developers have had to come up with work-arounds — the easiest to apply and the most robust being faux columns, as I described in Two Columns — Apparent Equal Height.

Don't Confuse Structure with Presentation

I've been asked what the difference is. Why is it ok to use CSS to make things display as a table, but not ok to use the <table> tag on the element? Let's look at just what the <table> tag implies.

In simplifed terms, a table is a container for positionally related data. The data in each cell are related in the same way to data other cells in the column, and in another way to data in cells of the same row. If the positions are altered, it implies an alteration of the meaning of the data. Another issue is that the layout is locked in by the markup; something that we're trying to avoid in the first place, by using CSS.

By using CSS, the markup can remain semantically correct and well structured. Both this demo and the two column demo referenced above use the same markup. We are free to create the presentation we wish without having to build it into the HTML markup. Here is the structure used:

<div id="wrapper">
  <p>banner stuff</p>

  <ul id="globalnav">
    <li>link</li>
    …
  </ul>

  <div>
    <div>
      <h1>header for column 1</h1>
      …
    </div>

    <div>
      <h2>column 2 stuff</h2>
      …
    </div>
  </div>
</div>

This demonstration illustrates just one more way to affect the layout you want. Using the table group of values has limited use until IE manages to become more CSS compliant.

recommended reading

Amazon ads go here.