Josh's 3-Column Layout in CSS

Josh Haglund came up with an awesome way to do a 3-column layout in CSS.

Let's suppose you have three DIVs, arranged into three columns with the float:left and float:right styles. (Chances are, if you're reading this, you know what this is. If not, Google some other pages, and see what others do.) The common problem (aside from learning to use floats) is that the columns aren't all the same height.

The quick solution is to create a background image that looks like the 3-column layout. If it's a simple layout, then you should be able to use a 1-pixel tall, very wide line, repeated several hundred times, to create the columns. Put that skinny gif into a DIV via a background-image:url(skinny.gif).

Then, within this DIV, you have the layout. Whereever the column is short, the background image displays, making it look like the column extends to the bottom of the layout.

For best results, make the layout first, then create the background image.