Help - Search - Members - Calendar
Full Version: CSS div background color
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
oli
Hi Everyone, this is my first post!

I've built a website that has a navigation bar that extends down the whole of the left hand side of the page, minus a header at the top and the footer at the bottom. This is held within a div called "leftbox". This holds the same content on every page of my site as it simple holds the links to the different pages. It has a grey background colour set.

The individual page contents is stored to the right of "leftbox" in a div called "content". This changes with each page and has a white background set.

The problem i am having is that in pages where there is a lot of text in "content" and there is a lot of 'scrolling down', it means "content" becomes longer than "leftbox" and as a result my grey background colour stops halfway down and becomes white.

How would i code this in CSS so that it does not do this and the grey background extends all the way down to (but not including) the footer?

I tried using a "height" attribute on the "leftbox" div which works, but then on pages where there is a small amount of text in "content", you have to scroll a long way through nothing to get to the footer!

Thanks in advance,
Oli.
Tom H.
That is a surprisingly difficult thing to achieve, and a satisfactory solution may involve JavaScript. A Google search for "Equal Height CSS Columns" (without the quotes) turns up some excellent discussions.
pandy
This gives an overview of the mess.
http://css-discuss.incutio.com/?page=AnyColumnLongest
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.