[SOLVED] Problem with float - In mozilla

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

Is it hosted anywhere so we can see the problem?

It has to do with clearing floats

Add overflow: hidden to #maindiv{ }

Try adding display:table to the maindiv

__________________
Web Design Manchester | Web Design Blog | kabonfootprint

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