Terrific Firefox Overflow / Float Behavior

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

The problem is that it fieldset.ownerboxdoes not float in Firefox. (Two translucent sets of fields 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 happened to my approach?

+3
source share
1 answer

Adjust the width to fit. You can overflow-x:hidden;to #ownerssee what it looks like "comprising."

Alternatively adjust the width to #owners.

: clear:both #owners.

+2

Source: https://habr.com/ru/post/1754411/


All Articles