Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
07-18-2007, 12:47 AM #1
- Join Date
- Jul 2007
- Thanked 0 Times in 0 Posts
"height: 100%;" not working (CSS)
At this link you can see the problem: http://www.cashmgmt.com/new.0/contact.php
The gold background on the bar to the right should be extending to the bottom of the page. I have a total of 3 divs related to this problem. One is called #main with its height set to auto. Within #main there are two divs (#content and #widgets) set to be next each-other with a "float: left" property. The contents of #content, therefore, determine the height of #main. The div #widgets, also contained within #main, has its height set to 100%. Since contained within #main, #widgets SHOULD extend the full length of #main (whose height is determined by the contents of #content), but for some reason it isn't. Its height is only as long as its contents, rather than being 100% of #main's height.
I'm sure that was all very poorly explained , but what am I missing? What needs to be done to get the #widgets div to extend to the bottom of #main? Time is of the essence, and any help would be GREATLY appreciated. Thank you in advance,
07-18-2007, 06:31 AM #2
- Join Date
- Dec 2004
- In a place far, far away...
- Thanked 1,043 Times in 1,019 Posts
You can't have a 100% height of nothing. Your elements need to have a height set to them. You are actually going about this the wrong way. Remove the margins and padding on the body. Then set the html and body elements to a height of 100%. Then set a min-height of 100% on the #container. Set the left column background image on the container making it repeat-y using top right. Use google to find out ways to fake min-height in IE6.