Quick CSS full height div question

[Major_Disaster]

Hello (and Merry Christmas!)

If like me you are a bit sad and have nothing better to do on Christmas eve, would appreciate a quick hand with this.

Have a look at the site im building here

Im trying to get the left 200px wide column (the Products one), to fill the height of the main content div (called #page). However, when i set height:100% and position:absolute, it overflows the #page and into the #footer

Any idea? Ive been bashing around with FireBug and cant see whats causing it? Its starting to really drive me crazy.

Cheers!

 

[Tripnologist]

It's because height: 100% relies on a set height for the parent element. If there is no set height, it keeps checking up the dom until it finds a set height. If it doesn't find one, it uses 100% of the page height.

There is no way to do what you're wanting to do in pure CSS, without using set dimensions. 'Faux columns' is what you're wanting to achieve; google it.

 

[Major_Disaster]

Thanks for the help, but i really didnt like the look of splicing together some images, so instead ive added a new wrapper div and played around with background colours to achieve what i was looking for.

Thanks anyway and Merry Christmas!

 

[analog]

Glad you've got it sorted, I had a look last night and could only make it work using fixed heights etc which is not what you're after.

Just out of interest could you explain how you managed to get the footer under the page div considering it doesn't have any fixed height, in my past experience the footer has appeared at the top of the page div, to make it appear under it I had to use :after to set a height.

Probably a stupidly simple question but I've only just started with CSS and can't seem to fathom it using firebug.