Вёрстка. Высота слоя div нулевая

Иногда при вёрстке так получается, что высота слоя div нулевая, при этом еще и margin и padding начинает себя вести не как надо. Решение есть.

html файл

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="testDiv.css" type="text/css">
    </head>
    <body>
        <div class="main">
            <div class="content first"></div>
            <div class="content second"></div>
        </div>
    </body>
</html>

testDiv.css

.content {
    float: left;
}
 
.first {
    height: 100px;
}
 
.second {
    height: 40px;
}

при таком раскладе высота элемента div класса main получается 0.
если из класса content убрать float, высота div класса main - 140.
как оставить float и высота чтобы была правильная - 100px?

Решение

float — это уже означает, что элемент вырван из потока и прибит к одному из краёв, а всё остальное его должно обтекать.
Так и всего остального, кроме обтекаемых элементов, просто нет, потому и высота нулевая.
Необходидмо добавить .main { overflow: hidden; }
Тогда div.main будет прятать то, что не вошло в заданные ему размеры. А поскольку размеры не заданы, то он будет подстраивать их сам так, чтобы всё своё содержимое отобразить.

http://forum.shelek.ru/index.php/topic,20417.0.html