[SOLVED] Problem with float - In mozilla

[jram]

I have a very basic doubt using float property. Here is my CSS Code:

#maindiv{width:800px;border:#7F7F7F 1px solid;margin:0 auto;}
.contdiv1{float:left;width:500px;padding:20px 5px 10px 25px;border:1px #990033 solid;}
.contdiv2{float:right;width:180px;padding:20px 25px 10px 5px;border:1px #990033 solid;}

and my HTML:

<div id="maindiv">
<div class="contdiv1">float left</div>
<div class="contdiv2">float right</div>
</div>

Now, the problem is:
I should get the border for the entire content. But its not showing border around the 2 DIVs which is placed inside the main div. Actually I have defined the border for the main div also. I can see the border, but thats showing as a line above ".contdiv1 and 2". I dont have this problem with IE. Is that something wrong with my code or is there any alternate for this?

Please help me!!!

[AdRock]

Is it hosted anywhere so we can see the problem?

[karinne]

It has to do with clearing floats

Add overflow: hidden to #maindiv{ }

[Emzi]

Try adding display:table to the maindiv

[jram]

Hi all,

Sorry for very late response... I tried adding overflow: hidden to #maindiv{ }...Its working fine now Thanks a lot karinne. I will be coming up with few more doubts

Thanks