CSS float problem

Jun 21 2012 6:59 AM

<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...

Answers (4)

browser compatibility

Table data in pdf/doc format