/    Sign up×
Community /Pin to ProfileBookmark

Div Height

Copy linkTweet thisAlerts:
Aug 22.2011

Hi guys,

Need help on trying to make the div height of my container 100%. The div has a bg image which should stretch to the height of the browser. But for some reason the container div and image only goes to a certain height. Not sure if the css code is correct but it is listed below. Any help would be greatly appreciated.

@charset “utf-8”;
/* CSS Document */

  • * { margin:0; padding:0 }

    • html {
    height: 100%;

    }
    body {
    margin: 0;
    height: 100%;
    }

    #container {
    margin: 0;
    height: 100%;

    }
    #header{
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    background-color: #FFFFFF;
    }
    #border{
    float: left;
    width: 800px;
    height: 20px;
    background-color: #FF9000;
    margin-left: 25px;
    margin-bottom: 35px;
    margin-top: 25px;
    }
    #logo{
    float: left;
    background-repeat: no-repeat;
    width: 140px;
    height: 150px;
    margin-top: 5px;
    margin-left: 25px;

    }
    #main{
    position:relative;
    width: 550px;
    height: 1080px;
    top: 10px;
    left: 0px;
    }
    #mock1{
    float:left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    border:none;
    margin-left: 25px;
    }
    #mock2{
    float:left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    border:none;
    margin-left: 100px;
    }
    #mock3{
    float: left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    border: no;
    margin-left: 90px;
    }
    #header_text{
    float: left;
    background-image: url(images/header_1.png);
    background-repeat:no-repeat;
    width: 500px;
    height: 70px;
    top: 0px;
    left: 0px;
    margin-left: 85px;
    margin-bottom: 0px;
    margin-top: 120px;
    }
    #web_text{
    float: left;
    background-image:url(images/web_text.gif);
    background-repeat:no-repeat;
    width: 175px;
    height: 50px;
    margin-bottom: 40px;
    margin-left: 20px;
    }
    #web_text1{
    float: left;
    background-image:url(images/web_text1.gif);
    background-repeat:no-repeat;
    width: 175px;
    height: 50px;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-top: 40px;

    }
    #websites{
    float:left;
    height: 200px;
    width: 820px;

    }
    #logos{
    float:left;
    height: 200px;
    width: 820px;
    }
    #misc{
    float: left;
    height: 200px;
    width: 820px;
    }
    #resume{
    float: right;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    margin-top: 10px;
    margin-right: 25px;
    }
    #creative {
    position:relative;
    width: 491px;
    height: 92px;
    background-image: url(images/creativity.gif);
    background-repeat:no-repeat;
    left: 350px;
    top: -150px;
    }
    #logo1{
    float: left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    margin-left: 25px;

    }
    #logo2{
    float: left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    margin-left: 100px;
    }
    #logo3 {
    float: left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    margin-left: 100px;
    }
    #web_text2{
    float: left;
    background-image: url(images/web_text2.gif);
    background-repeat:no-repeat;
    width: 175px;
    height: 50px;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-top: 40px;

    }
    #billboard{
    float: left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    margin-left: 25px;
    }
    #billboard1{
    float: left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    margin-left: 100px;
    }
    #billboard2{
    float: left;
    background-repeat:no-repeat;
    width: 195px;
    height: 180px;
    margin-left: 100px;
    }
    #button{
    position:relative;
    width: 150px;
    height: 50px;
    left: 750px;
    top: 80px;
    }
    #mini_mock{
    float: left;
    width: 700px;
    height: 450px;
    margin-left: 70px;
    }
    #mini_mock1{
    position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 510px;
    height: 600px;
    border:none;
    border-style:solid;
    border-width:thin;
    border-color: #FF9900;
    left: 0px;
    top: 10px;
    }
    #mini_mock2{
    position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 510px;
    height: 600px;
    border:none;
    border-style:solid;
    border-width:thin;
    border-color: #FF9900;
    left: 0px;
    top: 20px;
    }
    #mini_mock3{
    position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 510px;
    height: 320px;
    border-style:solid;
    border-width:thin;
    border-color: #FF9900;
    left: 0px;
    top: 10px;
    }
    #mini_mock4{
    position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 510px;
    height: 700px;
    border-style:solid;
    border-width:thin;
    border-color: #FF9900;
    left: 0px;
    top: 40px;
    }
    #windows_icon{
    float: left;
    width: 37px;
    height: 35px;
    }
    #border1 {
    float: left;
    width: 800px;
    height: 20px;
    background-color: #FF9000;
    margin-left: 20px;
    margin-bottom: 50px;
    margin-top: 25px;
    }

    to post a comment
    CSS

    5 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @aj_nscAug 22.2011 — Got any HTML to go with that CSS?

    Without knowing anything else about your situation currently....could you put the bg image on the body?
    Copy linkTweet thisAlerts:
    @khujo56authorAug 22.2011 — Here is the Html for that page.


    URL. www.designsbyjnr.com

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="main_style.css"/>

    <title>Designs by JNR</title>

    </head>

    <body>

    <div id="container">

    <div id="header">

    <div id="logo"><img src="images/designsbyjnr.png" width="160" height="160" /></div>

    <div id="resume">

    <a href="images/Jryan_resume.pdf" target="_blank"><img src="images/pdf.png" border="0" /></a></div>

    <div id="header_text"></div>

    <div id="border"></div>

    <div id="web_text"></div>

    <div id="websites">

    <div id="mock1"><a href="design.html" target="_self"><img src="images/web1.png" border="0" /></a></div>

    <div id="mock2"><a href="design1.html"><img src="images/web2.png" width="195" height="195" border="0" /></a></div>

    <div id="mock3"><a href=""><img src="images/web3.png" width="195" height="180" border="0" /></a></div>

    </div>

    <div id="web_text1"></div>

    <div id="logos">

    <div id="logo1"><img src="images/logo2.png" width="195" height="180" /></div>

    <div id="logo2"><img src="images/logo1.png" width="195" height="180" /></div>

    <div id="logo3"><img src="images/logo3.png" width="195" height="180" /></div>

    </div>

    <div id="web_text2"></div>

    <div id="misc">

    <div id="billboard"><img src="images/billboard.png" width="195" height="180" /></div>

    <div id="billboard1"><img src="images/billboard1.png" width="195" height="180" /></div>

    <div id="billboard2"><img src="images/billboard2.png" width="195" height="180" /></div>

    </div>

    <div id="border1"></div>

    <div id="footer"></div>

    </div>

    </div>

    </div>

    </body>

    </html>
    Copy linkTweet thisAlerts:
    @aj_nscAug 22.2011 — Ok, there's some confusion going on here that tells me that you can achieve what you're trying to do a different way - probably through a fixed background, but maybe not.

    Can you tell me what you are trying to achieve?

    The reason why i am saying this is because you only need to set a height on a container like this if you're content will often be less than the height of the browser window but you still want your container to be the height of the window.

    If you're content is longer than the browser window, then setting a 100&#37; height on #container will cause it to be, exactly as you specified - 100% height of the browser window, but not taller so it will stop after you start to scroll down the page (because it's already fulfilled it's 100% height). By taking a height specification off of it, it will encase all of it's contents (floats are an exception) all the way to the bottom.

    BTW, there's no background image on #container.
    Copy linkTweet thisAlerts:
    @khujo56authorAug 22.2011 — Yeah all i wanted to do was add a background image to the div container.

    so i set the height for the container and header div to 100%

    I removed the background image since it was not working.
    Copy linkTweet thisAlerts:
    @aj_nscAug 23.2011 — Would it suffice to add the background image to the body?
    ×

    Success!

    Help @khujo56 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...