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

Question

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?

Answer 1

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

Answer 2

I wouldn't do it like this. For layout, i prefer to use display:table and display:table-cell. But talking about your situation:

The reason for the div1 to stretch, is because it is clearing the float, when you applied clearfix class to it. So float won't apply on the div2. Instead, set it to the wrapper div (#content) and it will work fine.

<div id="content" class="clearfix">
    <div class="div">aaa</div>
    <div class="div">bbb</div>
</div>

http://jsfiddle.net/7QJC5/2/

Once again, I advise you to layout through display:table properties, as it works better on a cross-browser level.

Answer 3

Here I've use a little different approach to achieve the same effect. Check the DEMO.

--CSS CODE--

#header{background:red; width:100%; height:50px;}
#main{width:100%; height:100%; border:1px solid black;display:table;}
#sidebar{background:gold;}
#content{background:purple;}
#sidebar, #content{display:table-cell;}

--HTML CODE--

<div id="header">HEADER</div>
<div id="main">
    <div id="sidebar">SIDEBAR</div>
    <div id="content">
        <div class="">aaa</div>
        <div class="">bbb</div>
    </div>
</div>