14

Consider the following test case, in which a floated and an inline element are placed inside a <fieldset> versus a <div>:

.float {
  float: right;
  background-color: red;
  height: 200px;
}
<h1>With fielset</h1>
<fieldset>
  <span>Inline!</span>
  <div class="float">Float!</div>
</fieldset>
<fieldset>
  <span>Inline!</span>
  <div class="float">Float!</div>
</fieldset>

<h1>With div</h1>
<div>
  <span>Inline!</span>
  <div class="float">Float!</div>
</div>
<div>
  <span>Inline!</span>
  <div class="float">Float!</div>
</div>

When rendered, fieldset containers are 200 pixels tall (they clear the floats?) while the div containers are only as tall as the inline elements. What is the cause of this behavior, and is there a workaround which allows the fieldset containers to behave as the div containers do?

Teocci
  • 7,189
  • 1
  • 50
  • 48
Matt
  • 188
  • 1
  • 6
  • if you DON'T want them to clear floats, try giving the fieldset a style of `clear: none` – DA. Jun 26 '11 at 03:28
  • Had to get on the computer just to see what Jared Farrish was trying to show in his fiddle... turns out he was just playing the fiddle for the OP instead of showing proof otherwise. – BoltClock Jun 26 '11 at 03:34
  • @DA @imoda: I am pretty sure the default clearing style for fieldsets is already `clear: none`. – BoltClock Jun 26 '11 at 03:36
  • @BoltClock - I hope you weren't too disappointed... :P – Jared Farrish Jun 26 '11 at 03:37
  • @Jared Farrish: Well at least I'm not stubbornly browsing on my iPhone anymore this morning, so thanks :) – BoltClock Jun 26 '11 at 03:39
  • @Matt - I assume you're after something more like this, only with fieldsets? http://jsfiddle.net/HH5An/1/ – Jared Farrish Jun 26 '11 at 03:41
  • @Jared Farrish - Yes, I'm trying to get a fieldset which acts like a div in this respect. The context doesn't matter; this will be part of a more complicated page, but I was trying to make the test case as simple as possible. – Matt Jun 26 '11 at 03:56
  • @BoltClock - Yes, the default for fieldsets is clear:none. Chrome's web inspector shows the fieldsets and divs' computed styles to be equivalent in every way except for dimensions (and maybe margins and padding). – Matt Jun 26 '11 at 04:00
  • maybe fieldset is not what you want, try using a div, and add the css formating of fieldset, without the clear property of course – Ibu Jun 26 '11 at 04:01

2 Answers2

19

Apparently <fieldset> elements are supposed to generate block formatting contexts for their contents:

The fieldset element is expected to establish a new block formatting context.

That's why floated elements don't float out of them. I would guess that this has to do with the nature of fieldsets as visual form control groups. There could be other reasons, but off the top of my head that sounds the most plausible.

There doesn't appear to be a way to undo this, but I wouldn't be surprised; you can't destroy a block formatting context after creating it.

By the way, <fieldset>s don't clear floats (unless you give them a clear style of something other than none). When an element clears floats (or is said to have clearance), it clears only the preceding floats that touch it within the same formatting context. A parent element doesn't clear its children's floats either, but it can establish a formatting context for them to float in. This is the behavior seen with <fieldset>, and it's also what happens when you set overflow to something other than visible on a parent element.

From the spec (emphasis mine):

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

Additionally, as mentioned in the comments, there is no clearing style defined by browsers for that element, so the default clearing style would already be the default value of none. This is shown in this demo, in which only one of the <fieldset>s coming after the floating box is defined to have clearing properties and is indeed the one clearing the float.

.float {
  float: right;
  background-color: red;
  height: 200px;
}

.clear {
  clear: right;
}
<div class="float">Float!</div>
<fieldset>
  <legend>Fieldset!</legend>
</fieldset>
<fieldset class="clear">
  <legend>Clearing fieldset!</legend>
</fieldset>

External link of the demo

Teocci
  • 7,189
  • 1
  • 50
  • 48
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I certainly couldn't figure out a way to do it either. – Jared Farrish Jun 26 '11 at 04:01
  • 1
    The weirdest thing about this is that it was only in the HTML5 spec that `fieldset`s were defined to be their own BFCs. It wasn't in the HTML 4 or CSS specs... – BoltClock Jun 26 '11 at 04:03
  • I guess in a way it does make sense (and I've always thought the non-clearing div thing was wonky), since you would expect a fieldset to contain in height all children. Maybe the earlier specs don't include it because the browser makers just did it that way. – Jared Farrish Jun 26 '11 at 04:05
  • Thanks for the clarifications. This does, indeed, look like a case of "it's always been done this way": http://archivist.incutio.com/viewlist/css-discuss/110974. Looks like I'm going to have to look for a different way to do my layout. – Matt Jun 26 '11 at 04:19
-1

Set height for wrapper div; 

 <html>
 <head>    
  <style type="text/css">       
   .float {float:right; background-color:red;             height:200px;}   
</style> 
 </head> 
 <body>    
 <fieldset>    
   <span>Inline!</span>    
   <div class="float">Float!</div>  
 </fieldset> 
 <fieldset>     
    <span>Inline!</span>      
   <div class="float">Float!</div>
 </fieldset> 

  <div style="height:200px">    
   <span>Inline!</span>     
  <div class="float">Float!</div> </div> 
 <div style="height:200px">     
 <span>Inline!</span>    
 <div class="float">Float!</div> 
</div>
</body>
</html>
Rajasekar Gunasekaran
  • 1,799
  • 3
  • 24
  • 40
  • I don't think you're quite following what Matt is after with the fieldsets (not the divs). – Jared Farrish Jun 26 '11 at 04:02
  • This is an acceptable way to make the divs behave as the fieldsets do (I could also use one of the numerous float-clearing methods that exist), but I'm looking for a solution which makes the fieldsets behave as the divs do. – Matt Jun 26 '11 at 04:03