Clear: both won't work..

[gigiloumill]

Good morning guys: I have a problem to which I can't find a solution. I set up a div called: contact: set at 100% with and height set to: "auto", then, I created a div called: insidecontact set at 1010 width and 500 height. Now I have to divs inside the "insidecontact" div called "insideleft" and "insidecontactright" both set up to auto. My problem is that the div holding both divs would not set on auto. It will overwrite both divs. I tried removing the height all together but no luck. Does anyone have a solution? Thanks..here's the code.

.contact {
height: auto;
width: 100%;
margin-top: 10px;
clear: none;
}

.insideleft {
float: left;
height: 200px;
width: 200px;
margin-top: 5px;
margin-left: 5px;
position: relative;
}
.insidecontactright {
float: right;
height: auto;
width: 600px;
margin-top: 5px;
margin-right: 5px;
padding:10px;
clear: none;
position: relative;
}
.insidecontactright h2 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#DA130E;
text-align:left;
text-transform:capitalize;
font-weight:400;
}
.insidecontactright p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13.5px;
color:#000;
text-align:left;
text-transform:none;
font-weight:200;
}
.insidecontact {
height: 500px;
width: 1010px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
clear:both;
float: none;
}

[gentleone]

Setting heights to auto is 99% of the time useless and the content stretches the height anyway. The only time I've used a height set to auto is to get websites (when needed) to a 100% height in IE6.

I'm not really sure what you're after, but posting also the HTML code would be helpfull too. I do have an idea that you need the 'overflow: hidden' trick to clear your floats, but I need to see the HTML for that.

[gigiloumill]

Thanks G. I got it. It was the "overflow"...