Search code examples
csscss-floatclearfix

float: left makes clear: both stretch div to full height

I'm creating a full width website where you have a header, a left sidebar and the rest is the main content. It should look like this:

+--------------------------------+
|  header                        |
+---------+----------------------+
|         | div1                 |
| sidebar | div2                 |
|         |                      |
|         |                      |

The html and css looks something like this (but with more elements): http://jsfiddle.net/7QJC5/

As you can see, if i set sidebar to float: left, the cleared div1 stretches to full height. I found a workaround by positioning the sidebar manually:

position: absolute;
top: 60px;
bottom: 0;
left: 0;

but i'm not sure it's the best solution.

Can anyone explain why is this and how can i solve it, or is the position: absolute method ok?

Solution

  • For your two problems :

    1. You can add overflow:hidden; to #content. So your clearfix rule on child will be applied only inside #content, it won't mind anymore your floatting side bar : DEMO

      Make it simple, trigger layout. Make a search on dealing with floatting element. There's many ways depending on result you look for .

    2. For the scroll bar, swap to another box-model to include the padding into the 100%; height, Add : box-sizing:border-box to #main. DEMO