CODEWITHSUNDEEP
csshtmlcss-float
Harry
Harry

Reputation: 323

Floated div won't fully expand

I'm trying to design a page layout with two floated divs which I want to use for my content area and sidebar. My problem with the layout is that I tested one of those floated divs with a lot of text content, but it does not expand to show all of the content. The last paragraph seems to overlap with my footer

I have already added overflow: auto to the containing divbut it doesnt seem to work. Any ideas? 

<body>

<div id="header">
</div><!--ends header-->

<div id="navbar">
</div><!--ends navbar-->

<div id="wrapper">

    <div id="content">

        <div class="post">
         <p> Long content tested here</p>
        </div><!--ends post-->

    </div><!--ends content-->

    <div id="sidebar">
    </div><!--ends sidebar-->

    <div id="footer">
    </div><!--ends footer-->

</div><!--ends wrapper-->

</body>

CSS here:

html{
    height:100%;
    background:url(images/green-bamboo2.jpg);
    background-attachment:fixed;
}

body{
    height:100%;
    width:80%;
    margin: 0 auto;
    padding:0;
    background:#FFFFFF;
}

#header, #navbar, #content, #sidebar, #footer{
    display:block;
}

#header{
    height:100px;
}

#navbar{
    height:50px;
    background:#CCCCCC;
}

#wrapper{
    min-height:100%;
    background:#FFFFFF;
    position:relative;
    overflow:auto;
}

#content{
    float:left;
    width:60%;
    height:auto;
    background:#99CC00;
}

#sidebar{
    float:right;
    width:40%;
    height:200px;
    background:#09F;
}

#footer{
    clear:both;
    height:150px;
    background:#339933;
    position:absolute;
    bottom:0;
    width:100%;
}

Upvotes: 1

Views: 323

Answers (2)

Py.
Py.

Reputation: 3599

There is an issue in your css.

You're using both clear and position:absolute on #footer. As a result, it does not use the clear property.

EDIT: See http://jsfiddle.net/WTpAx/1/ to see what it'll look like if you remove position:absolute from #footer and min-height:100% from #content.

Upvotes: 0

Ryan
Ryan

Reputation: 5682

your height on the div is set to auto; which is fine, but your footer div is positioned absolute which means that it won't move when the other div starts to overlap. if you make it position: relative then it should move as your div gets bigger.

Upvotes: 1

Related Questions