Home/ Questions/Q 7934369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T21:37:44+00:00

I’m trying to design a page layout with two floated divs which I want

  • 0

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%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0