Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation 100% height div w/ background!

    Since I began doing CSS layouts instead of tables last year, it seems like every single site I do I run into the same problem -- getting a div to stretch to 100% height. I find the solution to it, it works; then when I try the exact same solution for the next site I do, it refuses to work properly. It's very frustrating how such a simple concept can be so hard to do...


    http://www.pinstripepresentations.com/stephanie/residential.php


    There are two divs -- left column and right column -- within a page_wrapper div. I need the right column div and it's background to always be 100% height and touch the top and bottom of the window. But right now it only stretches to the window viewable area and doesn't continue when you scroll.

    I've included all the parent height commands. I've been fighting with this dang thing for a whole day and I'm not sure what else to try. Please help!

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    top and bottom and position: relative; are not needed.
    to center a layout use margin: 0 auto;
    you should really use ids instead of classes for <divs>
    float the divs
    http://bonrouge.com/2c-hf-fixed.php

    Very good for you first css layout. Well done.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply, though I'm still a little confused.

    Remove top, bottom, and relative where? The wrapper div? The right column div?
    Where do I put the margin -- that will make it 100% height? The wrapper div is already set to that for a margin.

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried your suggestions in a few different places and it still isn't working. :c

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its because of your sidebars. They are position:absolute. They need to be floated and they can't have any positioning on them. Remove the heights from them as well. You also have this
    Code:
    html #page_wrapper {
    	height: 100%;
    }
    
    #page_wrapper {
    	position: relative;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	width: 974px;
    	margin: 0px auto 0px auto;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    It should be this
    Code:
    * html #page_wrapper {
    	height: 100%;
    }
    
    #page_wrapper {
    	position: relative;
    	min-height: 100%;
    	width: 974px;
    	margin: 0 auto;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    And 0 is 0, no need for units.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, the floats seem to solve my original problem, but with it comes a whole new problem -- the long scrolling pages look good, but the short pages such as:

    http://www.pinstripepresentations.co...ie/contact.php

    ...no longer stretch to fill the page (I'm working in FF3 right now.) >_< Further advice?
    Last edited by beans_etc; 11-04-2008 at 06:28 AM. Reason: added browser

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Update:

    I tried taking out the

    Code:
    height: auto !important;
    and just adding a regular height: 100%; which fixed the short pages, but it then brought back my original problem with the long scrolling pages...

    When I view the page with Firebug, the page_wrapper is still not stretching to 100% height.
    Last edited by beans_etc; 11-04-2008 at 06:35 AM. Reason: more info

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove the background from the right column and add this to your page_container CSS
    Code:
    background: url(../images/bg_content.png) top right repeat-y;
    You may want to add some bottom padding to your left column. You also need to clear your floats.

    http://positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • The Following 2 Users Say Thank You to _Aerospace_Eng_ For This Useful Post:

    beans_etc (11-04-2008), oesxyl (11-05-2008)

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It works! Thank you! I'll have to test it tomorrow in IE and Safari but so far so good!

    (BTW, I did actually clear the floats -- I use a <br class="clear" /> instead of a div though, it's just what I was originally taught.)

    Thanks again!

  • #10
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    There's only one slight flaw that I found -- when you shrink down the browser window to something like 800x600 or 1024x768, then go to one of the short pages like Contact and scroll, the background stops. I'm not sure why it works at higher resolutions and not smaller ones... I'm designing this for 1024.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove this from #page_wrapper
    Code:
    	height: auto !important;
    	height: 100%;
    Last edited by _Aerospace_Eng_; 11-04-2008 at 07:15 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Doesn't appear to change anything.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not needed but I added this after you posted

    Remove the position:relative; and top values from your navigation and promo box. Add a top padding to your left column. At a top margin to your promo box or add a bottom margin to your navigation.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You are officially my hero. *Piles you with cookies of thanks*

  • #15
    New Coder
    Join Date
    Nov 2008
    Posts
    24
    Thanks
    0
    Thanked 1 Time in 1 Post
    Cookies of thanks? That's a new one to me.


  •  

    Tags for this Thread

    Posting Permissions

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