chiliNUT chiliNUT - 1 year ago 64
CSS Question

Fieldset next to floated div overflows to the right in chrome/IE, breaks to the next line in FF

I am using Bootstrap 3.
I have a containing element containing a floated div and a fieldset. The floated div is 100% width so the fieldset should sit below it. This works in FF (which I was using to develop) but in chrome/IE, the fieldset overflows out of container and sits to the right of


enter image description here

border:1px solid red;

<link href="" rel="stylesheet"/>
<div class="container">
<div style="float:left;width:100%;">
<a >Select All</a> / <a >Select None</a>

I can fix it by adding
to the fieldset.

Which browser is correct? It seems like FF is in the wrong. What rule is FF breaking or excepting to cause this to render differently? Is this a bug?

Noting that when not using bootstrap, it renders as expected in all browsers I tested. Within bootstrap, if I use a div instead of a fieldset, it also renders the same across browsers.

Answer Source

Looks like it's the fieldset default styling being over-ridden by the Bootstrap CSS. It's applying a min-width: 0 to fieldset which is causing the element to have no width. Not sure why this was added to Bootstrap but it's probably something to do with it's expected content being actual form fields as opposed to just text as per your example. Try adding some valid form HTML as per the MDN link to see if that improves your situation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download