PDA

View Full Version : Column background issue


Finland Blue
05-19-2010, 11:23 AM
I am trying to produce a web site with a left column that has a background, without a height, so the background extends as far as the main content text.

In the following example :
http://www.travel-experience.net/aboutus.htm
... the left column has a fixed height, so fits perfectly.

In the following example :
http://www.travel-experience.net/aboutus2.htm
... the left column has no height, but does not extend its background all the way down. Can someone please advise why this happens, and how I should correct to make the background extend as far as the main content text requires.

Thanks

gentleone
05-19-2010, 12:34 PM
the left column has no height, but does not extend its background all the way down. Can someone please advise why this happens, and how I should correct to make the background extend as far as the main content text requires.That's simply because there is no height set. The background color will go as far as the content goes in your left column.

There are several solutions for this and the most well known one is the 'faux columns' trick:
http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Personally I use this one:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Finland Blue
05-19-2010, 01:13 PM
Thanks for those tips! Can your preferred version also be applied using fixed width layouts?

gentleone
05-19-2010, 02:06 PM
Thanks for those tips! Can your preferred version also be applied using fixed width layouts?

Yes, no problems with that!

Finland Blue
05-19-2010, 07:03 PM
Agh ... I really did try to make this work, but somehow it will not ...

Could you take a look :
http://www.travel-experience.net/aboutus2.htm

I took the height away from the left and right columns. I added a background (faux column style) which should make the left column and right column have borders and backgrounds however much text is in the middle.

But now I get no border at all on the right, and an overflow of text in the middle.

Thanks ...

gentleone
05-19-2010, 08:49 PM
Looking at the source code I see still quite some (inline styled) absolute positioned divs in you right column. Absolute positioned divs will be placed outside the natural document flow, so they will mess up everything. Its a powerful way of placing a div on your page, but don't use them for your layout.