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