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 colour (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 colour (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!
