Faux Columns Summarized

Every day -- and I mean every day -- here at #CSS we get questions along the lines of how do I make this sidebar column extend as far as the content column? -Every time we say the same thing: Faux columns.

Well, this is it (view source). What makes it all tick is the background image set in the div#container. A simple image, with a width of 710 pixels and a height of 4 pixels. To better see what's going on I've bordered up all the divs; the div#container is light green while the child divs are red.

div#container {
 width: 710px;
 margin: 0 auto;
 background: transparent url(columns.png) repeat-y top center;
}

div#content {
 width: 465px;
 float: left;
 margin-left: 25px;
}

div#sidebar {
 width: 170px;
 float: right;
 margin-right: 15px;
}

The topic of faux columns has been described in-depth in the ALA article Faux Columns; I suggest you read it.

If all you need is a simple one-colored bar and don't want to use an image, you might want to check out mmmbeer's Simple Columns.