Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    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,


  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts