You must have run into the problem of height property of a DIV not being active when it contains floating DIVs. This is because when you set the CSS property of a DIV to either float left or right, it starts floating to the respective direction and hence the height is not retained for the parent element.

The following screenshot clearly demonstrates that the “Main” DIV does not extend with the other two DIVs, “Left” and “Right”.

Fortunately, there is a simple trick to overcome this problem. If you set the CSS property “overflow” of the main DIV to “hidden” it will cause it to stretch the full height of the other two DIVs. This is shown in the screenshot below:

The CSS for the above example is:

.main {
	background-color: #666;
	width: 100%;
	text-align: center;
	overflow: hidden;
}
.main .left {
	background-color: #00c;
	float: left;
	height: 200px;
	width: 150px;
	padding: 5px;
}
.main .right {
	float: right;
	height: 200px;
	width: 150px;
	background-color: #093;
	padding: 5px;
}
body,td,th {
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	font-weight: bold;
}

And the corresponding HTML code:

<div class="main">
  <div class="left">Left Floating DIV</div>
    <div class="right">Right Floating DIV</div>
    Main DIV Content  </div>

Note the “overflow: hidden;” for the CSS rule “main”.