<html>
<head>
<title> Div Problem </title>
<style type="text/css">
.maincontainer{
margin:20px;
border:2px solid black;
padding:5px;
}
.subcontainer{
margin:3px;
border:3px solid red;
padding:2px;
width:150px;
height:auto;
float:left;
}
.row
{
clear:both;
}
</style>
</head>
<body>
<div class="maincontainer">
<div class="subcontainer">
My name is Khan
</div>
<div class="subcontainer">
My name is Khan
</div>
<div class="subcontainer row">
My name is Khan
</div>
<div class="subcontainer">
My name is Khan
</div>
</div>
</body>
<html>
--------------------------------------------------------
--------------------------------------------------------
The problem in the above file is that the data is out of the maincontainer. But when i delete the float from the container its again came into the the container. How can i make the 4 subcontainer classes data into the container class division tag without using specific number for the height tag in maincontainer class(It should be done using height:auto;)???
Thanks in advance...