CSS and DIV with dynamic height

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

He means to post a sample code that doesn't work on JSfiddle so it can be observed and tested to find the problem. http://jsfiddle.net/ — scragar, Dec 28 '12 at 13:45
like that : http://jsfiddle.net/vf98v/ (did it for you this time so you know for the next) — tchap, Dec 28 '12 at 13:46
The problem certainly comes from the CSS/HTML of the div.menu or div.content, can we see the CSS? — Salketer, Dec 28 '12 at 13:46

score 6 · Accepted Answer · edited May 23 '17 at 11:48

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

score 0 · Answer 2 · answered Dec 28 '12 at 14:00

You can fix this with a clearfix: http://nicolasgallagher.com/micro-clearfix-hack/

Add this to your css, and cf class to your div.content

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Test: http://jsfiddle.net/CJZCt/4/

CSS and DIV with dynamic height

2 Answers2