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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Container set to 100% but is cutting off half way down page

    I have my container div, html and body set to 100%. Container div also has a min-height of 100%. For some reason the container div is not scaling with the height of the content of the rightside div. Any ideas?

    Here's the css:

    html {
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    }
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    background: #000;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    }
    #container{
    background-color: #000000;
    width: 1000px;
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    }

    #leftside {
    width:149px;
    height: 100%;
    background-image: url(images/bgimage.jpg);
    background-repeat: repeat-y;
    float: left;
    }

    #rightside {
    width: 700px;
    border: 0;
    height: 100%;
    background-color:#000;
    float: left;
    }

    Here is the page http://www.sandiegostair.com/about_s...gs_stairs.html

    Any ideas as to how I can get the container to be 100% so the left side image will repeat to the bottom of page?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello absolutechele,
    It is going 100%.
    When you set #container to 100%, it goes the full height of the browser window...and that's it. If your content is longer and you scroll some more screen into view, the container already went 100% and it's not going more just because your scrolling.
    I hope that explained it.

    Have a look at this full height layout - http://nopeople.com/CSS/full-height-layout/index.html - view the source to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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