[thelist] Safari with fieldset and float: left

Ben Glassman bglassman at gmail.com
Wed Aug 16 15:34:37 CDT 2006

By default a containing element (fieldset in this case) should not expand to
contain floated children (the divs) unless they have been explicitly
cleared. Internet Explorer gets this wrong, which is why it might look right
in that browser. It also seems to work in Firefox, but unless I'm missing
something it probably shouldn't.

You either need to add an element inside of the fieldset with clear: left;
or you could float the fieldset itself (a floated element will expand to
contain floated children) but you are still going to have to clear the
floated fieldsets to get the containing div to expand to contain them.

The other alternative I can think of is to use the easy clearing method [1].
You'd end up add a class of clearfix to the fieldsets, or floating the
fieldsets as well and adding the clearfix to the form element.

[1] http://www.positioniseverything.net/easyclearing.html

Good luck,


On 8/16/06, Bill Moseley <moseley at hank.org> wrote:
> (sorry to those also on the css-d list)
> Anyone know what might be causing Safari to render this fieldset:
>     http://hank.org/demos/fieldset.html
> like this?
>     http://hank.org/demos/safari.png
> It's the float: left that seems to get the checkboxes out of the flow
> of the <fieldset>.
> Why doesn't the fieldset contain all the checkboxes?
> --
> Bill Moseley
> moseley at hank.org
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !

More information about the thelist mailing list