Question

I’ve got a webpage structure like this one:

<div class="total">
    <div class="menu">
    </div>
    <div class="content">
    </div>
</div>

So the “menu” div contains my left menu, and th “content” div contains some dynamic text. Actually the structure I’ve made positioned both in the correct way, inside my “total” div. I’ve actually edited my “total” div on my CSS like this:

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
}

The problem is that I can’t obtain what I actually want: the border is all on the top (it’s like an horizontal row) and my div with a different background color do not appear.

How can I make the “total” div’s height dynamic?

EDIT: Link to jsFiddle

Answer 1

The .total element has completely collapsed because all of its children are floated. All you need to do is add a clearfix.

http://jsfiddle.net/CJZCt/3/

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
    overflow: hidden;
}

Other methods for clearing floats can be found here: https://stackoverflow.com/a/1633170/1652962