Weird Firefox overflow/float behavior

Question

Hello there!

I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).

The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)

CSS rules applied here:

#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}

Please help, what's wrong with my approach?

Answer 1

Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".

Alternatively adjust the width on #owners.

Edit: Seems you just need to clear:both on #owners.