HTML Code:
<div id="hmContent">

<div class="sl01" ></div>
<div id="clear"> </div>
<div class="sl02" ></div>
<div id="clear"> </div>
<div class="sl03" ></div>
<div id="clear"> </div>
</div> <!-- end of hmContent -->
hm content is not containing the three divs. I go to google chrome to inspect it. and it has a height of 0. While it should have at least the same height as the divs that it contains. I did place a "clear" div before its closing tag.
i really don't see why it is not working. far as i can see it is correct.
Any really simple glaring mistakes I am not picking up on?

Code:
#clear{
margin:0px;
padding:0px;
}
#hmContent{
width: 100%;
height:auto;
margin:0px auto;
background-color:#ff5500;
}
#hmContent .sl01{
	width:30.55555555555555%;
	background-color: #b2d1d1;
	height:300px;
	margin:0px 10px;
	border-left: 2px solid #000;
	float:left;
}

#hmContent .sl02{
	width:30.55555555555555%;
	background-color: #b2d1d1;
	height:300px;
	margin:0px 10px;
	//margin-left:30.55555555555555%;
	border-left: 2px solid #000;
	float:left;
}
#hmContent .sl03{
	width:30.55555555555555%;
	background-color: #b2d1d1;
	height:300px;
	margin:0px 10px;
	//margin-left:61.11111111111109%;
	border-left: 2px solid #000;
	float:left;

}