Expanding column issue – solved!

July 25, 2007

I’ve been working on a website for a client and had everything working using CSS except for some issues with the left column. This left column contained some navigational elements and I was using a background color (I also tried an image) and a small right border to visually separate it from the main content area.

The problem was that no matter what settings I applied to the CSS, I couldn’t get the background color (or image) and border to expand to the length of the content in the main section. I was able to set a min-height to force it to be at least a certain length for the shorter pages, but for the longer pages, the left column colour and border just stopped at the 600px minimum height I’d specified.

After some Googling and not finding anything (mostly because I didn’t know what terms to search for!), I called my friend Char in Boston… who happened to be in California at the time… and she helped me with some sites that she’s used. (She has had the problem too but couldn’t remember what quirky thing she had to do to solve it, and not being at home, she couldn’t access that info easily either.) After a bit more sleuthing using those sites as a starting point, I found the answer here: http://www.positioniseverything.net/articles/onetruelayout/equalheight

As I’m only testing in Firefox and IE6 at the moment, I ignored some of the warnings about interesting things that happen in other browsers and went ahead. All I had to do was add about 4 lines to my CSS – and it worked!

Here’s what I added:

* added overflow: hidden; to my wrapper (#content) DIV
* added a new style definition as follows:
#MainContent, #ContentLeft
padding-bottom: 32767px;
margin-bottom: -32767px;

(My elements are called #MainContent and #ContentLeft).

I then tested in Firefox 2 and Internet Explorer 6 – and it works in both for long and short pages!!! Now to download IE7 and test there… If that works too, then I have a winner!

Thanks Char!

Update: Yep, works in IE7 too!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: