different behavior of clear inside fieldset

Forum Moderators: not2easy

Message Too Old, No Replies

different behavior of clear inside fieldset

idfer

9:30 pm on Mar 31, 2009 (gmt 0)

Hi all, this has been puzzling me for some time... In the code below, the style

"clear: left"

pushes Paragraph 2 down all the way below the floated div:


<html> 
<body> 
<div style="float: left; width: 4em"> 
abcd abcd abcd abcd abcd abcd abcd abcd  
abcd abcd abcd abcd 
</div> 
<div id="main"> 
<p>Paragraph 1</p> 
<p style="clear:left">Paragraph 2</p> 
</div> 
</body> 
</html>

But then if i replace

<div id="main">

by a

<fieldset>

, Paragraph 2 stays to the right of the floated div. Same thing applies for tables. I've tested this in FF 2, IE 6, and Opera 9, using DTD HTML 4.01 Transitional.

So my question... Is this part of the standard, or an undocumented feature? And can i somehow make "clear"s inside divs behave the same way as inside fieldsets?

Thanks in advance

swa66

11:12 pm on Apr 4, 2009 (gmt 0)

I'd presume that a fieldset is only legal to use inside a form.
Behavior of invalid html is tricky at best.

BUT it seems the validator accepts <fieldset> anywhere in a document, and it seems the DTD actually allows it to be used there as well...

Is the allowing of a fieldset anywhere an intentional feature or a bug? Hard to tell ...

Clear is defined here:
[w3.org...]

Now that one is clear (pun not intended): it'll clear everything floated earlier, provided it doesn't fall under the exception:
"The 'clear' property does not consider floats inside the element itself or in other block formatting contexts."

Block formatting context isn't something commonly quoted out here:
[w3.org...]
Note that table cells establish now block formatting contexts and that would indeed clarify why you see tables act the same.
But it doesn't mention a fieldset ...

Yet FF3, Opera and safari all agree on this ...

the clue why this is would be here:

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

fieldsets have by default a border around them and that border would go under the float (becoming invisible if it didn't establish a new block formatting context ...)

Now armed with this, can we make a div behave like the fieldset appears to do?

sure:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>untitled</title>
  </head>
  <body>
    <div style="float: left; width: 4em">
      abcd abcd abcd abcd abcd abcd abcd abcd
      abcd abcd abcd abcd
    </div>
    <div 
 style="display:inline-block">
      <p>Paragraph 1</p>
      <p style="clear:left">Paragraph 2</p>
    </div>
  </body>
</html>

idfer

3:34 am on Apr 5, 2009 (gmt 0)

Nice! Thanks for the detailed explanation swa66. The

display: inline-block

trick works great in Opera and IE, but not in FF 2.0, strange.

And funny enough, my next question was about <fieldset> and in what context it's allowed. Looks like you answered that one too. Cheers.

swa66

3:53 am on Apr 5, 2009 (gmt 0)

FF2 doesn't do display:inline-block without some help.
See [webmasterworld.com...] on how to fix that if you still have FF2 visitors.
I only have 1.9% of my visitors on FF2.0.X, low enough not to test against it anymore (I've almost more users visiting using an iphone).