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="main-top"></div> <div id="main"> <div id="content"> [content here] </div> <div id="sidebar"> [sidebar here] </div> <div id="main-bottom"></div> </div>
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
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
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
Hey presto, equal-height content and sidebar.