Frontendplace Blog

Sharing Frontend developing ideas

Stopping float clearing outside the current container

Posted by info on June 4th, 2007

In IE when clearing a float inside a block container only the floats will be cleared inside the current block item. In FF all the floats will be cleared. So if you have a floating left column a left float clearing will result in a drop of the content beneath the left column. You can fix this with adding an extra left floated parent around the content that has the clearer in it. But I came across another quirck in FF .. also adding a fieldset container will do the same thing as a floated container. See example:

Without fieldset or floated parent:

zonderfieldset

With fieldset or floated parent

metfieldset

Only when using the floated element as parent in combination with a fieldset and you have a textarea or inputfield inside a fieldset that you enable/disable during form input, you get a 3 pixel margin under the fieldset in IE. So you don’t need the floated element when you already have the fieldset. You need a blocked container parent for the fieldset to get rid of the 3 pixel margin jump when you enable disabled input elements.