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:

<div id="col1">
	<p>Hey, did you know that the modern necktie originates in the cravats worn by Croatian mercenaries during the Thirty Years War almost four hundred years ago? From that kick-ass origin, ties have become the sartorial choice of dandies, fops, and Organization Men of all stripes. Boring!
	<p>While we don’t make ties that are capable of staunching aortal bleeding from a musket-ball wound, our extra-skinny, super-strong ties could be used as a garrotte – or a tourniquet, if you wished.
	<p>Lorem ipsum dolor sit amet…
</div>

Then simply float one beside the other:

div#column1 {
	width: 40em;
	float: left;
}
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:

div#column1 {
	width: 45%;
	float: left;
}
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.

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:

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 <div> elements:

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

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.