Steve Taylor photo

Vertically aligned content and sidebar with CSS

One of the steps backwards taken with CSS is control of vertical stuff. Getting coloured sidebar and content areas to be equal height even when their contents are vertically unequal, and vertically centering something in a box are just two things that are (1) dead easy with tables, (2) quite common design requirements, and (3) a bit fiddly at best with current CSS standards.

Things may be changing with new CSS standards, and with the evolution of various hacks and workarounds. Anyway, I just found a solution for a site I’m working on which seems to work well in this instance. I may have reinvented some wheel or other, but here it is.

The design involves a content area and sidebar looking a bit like this (scaled down & simplified here!):


My solution is partly based on the common technique of using a vertically repeated background image to delineate the sidebar and content areas. This usually puts the image as the background of the body tag, giving top-to-bottom vertical columns. Here, I need the rounded top and bottom, and there’s the header and footer (not shown here) to account for, too.

Here’s the markup for my solution:

<div id=&quot;main-top&quot;></div>
<div id=&quot;main&quot;>
	<div id=&quot;content&quot;>
		[content here]
	<div id=&quot;sidebar&quot;>
		[sidebar here]
	<div id=&quot;main-bottom&quot;></div>

main-top and main-bottom take care of the rounded top and bottom, with full-width background images and a fixed height (not forgetting the Expanding Box and min-height fixes for good ol’ IE 6).

main is given a vertically repeated background image, about 5px high, for the sidebar’s gradient and the white background for the content. (This design actually has a slight vertical gradient in the content area, too. Setting it as a non-repeating top-aligned background image for content, and giving content a min-height equal to the image’s height, sorted that out.)

The content and sidebar are floated right (don’t forget IE’s double float margin bug!).

The key here is setting main-bottom to clear:both and – my new (for me) innovation – placing it inside the div with the class main. It clears the content and sidebar, exposing the repeated background on main.

Hey presto, equal-height content and sidebar.