If you have a web page layout with divided text that does not need to flow between columns, then the CSS setup is fairly easy. Using our Straight & Narrow design as a starting point, wrap each separate text column in a div:

1. <div id=”col1”>
2. <p>Hey, did you know that the modern necktie originates
3. in the cravats worn by Croatian mercenaries during the Thirty
4. Years War almost four hundred years ago? From that kick-ass origin,
5. ties have become the sartorial choice of dandies, fops, and
6. Organization Men of all stripes. Boring!</p>
7. <p>While we don’t make ties that are capable of staunching
8. aortal bleeding from a musket ball wound, our extra-skinny,
9. super-strong ties could be used as a garrotte – or a tourniquet,
10. if you wished.</p>
11. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
12. Etiam erat tellus, fringilla non luctus in, volutpat a tellus.
13. Etiam convallis nunc et tellus volutpat vestibulum. Praesent justo
14. massa, porta id porttitor ut, adipiscing in nulla. Mauris vitae felis
15. lectus, nec elementum dolor. Donec ligula metus, blandit nec placerat
16. at, placerat et erat. Praesent non erat quis magna accumsan egestas
17. sed nec elit. Ut nec nibh nisi, et pretium eros. Etiam tincidunt
18. rutrum justo, at suscipit quam posuere vel. Suspendisse ac neque
19. non dolor rutrum fringilla. Nullam varius venenatis lacus sit amet
20. porttitor. Cras porttitor sapien at ante commodo sodales. Nunc risus
21. eros, tincidunt sed varius vel, sodales ac mauris. Quisque sapien erat,
22. lacinia a tincidunt quis, faucibus sit amet diam. Quisque condimentum,
23. nunc ac tincidunt tempor, risus est tincidunt diam, vel tempor felis
24. eros in dui. In sed nibh sapien, non eleifend sem.</p>
25. </div>

Then simply float one beside the other:

1. div#column1 { width: 40em; float: left; }
2. div#column2 { margin-left: 42em; }

We simply use the same technique that we did for a single column next to a captioned image. It’s also possible to give both columns the same fluid width:

1. div#column1 { width: 45%; float: left; }
2. div#column2 { margin-left: 50%; }

There are, however a few problems with this. It is difficult to give both columns the appearance of the same height, and vertical alignment at the top of the columns can be tricky. It is at this point that most developers return to tables in frustration, but that is not necessary… so long as you are willing to set aside compatibility with IE6 and 7 for the moment.

display: table

Think for a moment of how a table processes its content. In a table, the height of a row – and thus the height of all cells in that row – is determined by the content of the largest cell. A table caption is always, by default, at the top of the table, center-aligned to the table width.

We don’t want to actually use a table to organize our site: that is non-semantic, and difficult to maintain. Tables remain solely for tabular data. What we want to do to our divs is to tell them that they act, and display, like table cells.

This is simple in CSS:

1. div#column1, div#column2 { display: table-cell; width: 50%; }

Both of these divs are now the same height. The height of all the divs with display: table-cell is determined by the highest div. You can prove this by placing a border or background-color for both divs:

1. div#column1, div#column2 { display: table-cell; width: 50%; padding: 2em;
2. border-bottom: 5px solid black; }