<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#wrapper{
width:100%;
height:auto;
background-color:#009;
}
#container_left{
float:left;
width:200px;
text-align:center;
height:100px;
background-color:#960;
}
#container_right{
float:right;
width:200px;
text-align:center;
height:100px;
background-color:#909;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Document</title>
</head>
<body>
<div id="wrapper">
<div id="container_left">
left div
</div>
<div id="container_right">
right div
</div>
</div>
</body>
</html>
I had expected the div with id wrapper to have the height of its contents, but the wrapper div seems to have disappeared from the body, since the background-color is not working finely for it.
It reappears when I remove float:left from inner div elements, but this solution isn’t correct for the overall design.
Any other solutions?
Because of element with float CAN float out of the box of parent element
You must put element with clear style to the end of parent content – it will be placed under both floated divs AND will not float out of the box (So parent div will be resized to disered size )
Other solution is to set height for parent div