dionidium.com

Wayne Burkett's Weblog | Home

Extending Columns
04:49PM CST September 03, 2004 | Comments [2]

Evolt's "Ten CSS Tricks You May Not Know" is great stuff. The last of the ten tips describes a way of extending menu divs the length of neighboring content areas made popular by Dan Cederholm. But they get one thing wrong:

Unfortunately the only solution to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column.

Not true. I've been using an alternative method to extend menu divs for over a year. The page you're looking at right now -- unless this site's design has changed since the day of this post, of course -- uses this technique.

It works by specifying the background color of body or a wrapper div to be the same as the desired background color of the menu, then offsetting the content div. No image necessary.

See it in action.

#1 | 11:30PM UTC September 03, 2004 | Lonnie Kraemer
Lonnie Kraemer
This is fine as long as the content div has enough content to make it the longest column, which is not always the case on many sites.
#2 | 08:06AM UTC September 04, 2004 | Wayne
Wayne

Both Doug Bowman and Eric Meyer wrote yesterday about this same problem, oddly enough. My solution only works if the content div contains more content than the menu div, as Lonnie pointed out. It's been my experience that this will be the case 90% of the time.

Doug and Eric have been throwing around ideas on how to achieve the faux-column effect regardless of menu size. Their thoughts are worth a look.