CSS Parent DIV Overflow

Question

I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows:

<body>
    <div id="Container">
        <div id="Logo"></div>

        <div id="Banner">
            <div id="Nav"></div>
        </div>
        <div id="Content">
        </div>

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

And my CSS is as follows:

@charset "utf-8";
/* CSS Document */


html, body {
    height:100%;
    padding:0;
    margin:0;
    background-image:url(../layout.img/background_gradient.gif);
    background-repeat:repeat-x;
}

#Container {
    height:100%;
    width:950px;
    margin:auto;

    background-color:#FFFFFF;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
}

#Logo {
    width:160px;
    height:160px;
    float:right;
}

#Banner {
    width:100%;
    height:160px;
}

#Nav {
    width:550px;
    height:33px;
    position:relative;
    top:100px;
    left:50px;
}

#Content {
    clear:both;
}

And finally the result can be seen here:

http://jsfiddle.net/mczMS/

As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.

cletus · Accepted Answer · 2009-11-19 03:58:15Z

8

Try adding:

#container { min-height: 100%; }

after height 100%. You may also want to try:

#container { overflow: auto; }

answered Nov 19, 2009 at 3:58

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Over a year ago

Nice! Worked beautifully. Thanks for that!

Deeksy · Accepted Answer · 2009-11-19 03:59:41Z

4

If you remove the height:100% from the container it will stretch to fit its contents.

answered Nov 19, 2009 at 3:59

Deeksy

5,4742 gold badges26 silver badges27 bronze badges

1 Comment

cletus Over a year ago

I assume the height is meant to be 100% if its less than full height however.

Collectives™ on Stack Overflow

CSS Parent DIV Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related