Home/ Questions/Q 3756924
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T09:55:37+00:00

This is a very common scenario, I think. I’m relatively (no pun intended) new

  • 0

This is a very common scenario, I think.

I’m relatively (no pun intended) new to CSS and am having an issue with float alignment. I have two divs, one which will hold main content to be floated left and the other for navigation, which should be floated right.

Anyway, here is what happens when I don’t apply any CSS formatting. This is desired behavior; the page will scroll down as expected:
Desired behavior

Here is what happens when I apply float: left or float: right to the respective elements:
Undesired page overflow

They both overflow past the page. I want it to stretch the page so that it scrolls down if it doesn’t fit on one screen area.

A snippet of my HTML:

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

And the corresponding CSS:

#content {
    padding:10px;
    padding-top: 110px;
    padding-bottom:60px;   /* Height of the footer */
}

#main {
    padding: 10px;
    float: left;
    width:70%;
    text-align:left;
}

#secondary {
    padding: 10px;
    float: right;
    width:20%;
}

Why is it doing this, and how can I fix it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Clear the floats and you should be OK.

    For example according to your example:

    <body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>

    <!-- clear -->
    <div style="clear:both;"></div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

    Update: for older IE browsers, the clearing div might need a height defined to give it a “hasLayout” property or else it will ignore this div.
    http://www.satzansatz.de/cssd/onhavinglayout.html

    Generally, people make a class definition that has all this info so you only need to type <div class="clear"></div>

    Here’s an example of robust clearing CSS from http://sonspring.com/journal/clearing-floats

    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

    There are alternative methods to clear floats in the parent div and removing the extra, structural <div> tag but I personally don’t feel a need to investigate if they are bullet-proof if this solution definitely is.

    • 0