When people ask me how to make a standard two column layout using CSS, i often tell them to just use a background image that makes it look like both columns stretch the entire height of the page (while in reality the column with the shortest content actually stops first, you can’t tell because the background image is designed to line up with the columns)

Tonight, in boredom, and since i was in the CSS mode from looking at my students HTML homework (we do xhtml 1.0 strict, baby!) i created a much better solution that doesn’t require the ghetto background image smoke and mirrors.

you do the same thing as usual: create two divs and float one to the left of the other.

but on the right div, you actually give it the background you want for the left div
then you give the right div a padding-left equal to the width of the left div

next you put another div inside the right div with the background you really want for the right side

finally, you put one big div around it all with a background the same as the the one for the right side.

that way the padding on the “right” div makes sure the left side has background that spans the whole length of the right div.

and the big div that wraps around it all makes sure the right side has background all the way down if the left side happens to be longer.

check out the code