6 replies [Last post]
bjaspan
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-5
Joined: 2006-02-22
Posts: 5
Points: 0

Scenario: A two column layout, one floated to the left ("nav") and the other ("main") in normal flow with a left margin wide enough to skip past the left column.

Inside the main area, I have a div which contains a float and a clearing div (I've read about the :after clearfix trick here but haven't used it). The clearing div in the main area clears past the bottom of the nav column contents. At first I thought this was wrong but reading about the clearfix trick makes me think it is correct.

However, I discovered by accident that wrapping that div in the main area inside a fieldset makes the inner clear only clear past the float inside the inner div inside the fieldset. The behavior occurs in IE 6 and Firefox 1.0; I haven't tried other browsers.

What is going on? Is this behavior correct or just a useful bug?

A sample is attached. Id test1 shows the external clearing. Id test2 shows how the fieldset prevents external clearing.

Thanks,

Barry

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

*Not* clearing external floats; why does a FIELDSET work?

The behaviour is correct, except for the thing with fieldset.

clear will clear all floats in the same block formatting context. To contain the effects of a clear you need to ensure the element to which the effects need to be contained establishes its own block formatting context. You can do that:
- by floating the element
- using an overflow setting other than visible
- some other ways

Also, the clearfix solution doesn't contain the effects of a clear, it only contains a float.

If you do a search on these forums you'll find several threads on containing the effects of a clear.

In FF at least, all elements are created equal, they are then styled appropriately by the browsers default style sheet to give the expected behaviour. These are the default styles for a fieldset in FF1.5.0.1

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0.35em 0.625em 0.75em;
  border: 2px groove ThreeDFace;
}

None of those styles will trigger creation of a new block formatting context(BFC). If the fieldset is in fact triggering a new BFC, then its either a bug or you have applied some other styles.

bjaspan
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-5
Joined: 2006-02-22
Posts: 5
Points: 0

*Not* clearing external floats; why does a FIELDSET work?

Thanks for the quick reply. Creating a new BFC with overflow hidden seems to do the trick. I needed to add a height <anything> tag to make it work with IE; I saw a reference to that trick somewhere. I'll have to ponder/read to find out why that (a) works, (b) doesn't force the height of the box to the specified value, and (c) clip the contents of the box since I am specifying overflow hidden.

As for the <fieldset> behavior, I attached a complete stand-alone HTML page with embedded CSS to my original post that exhibits the same behavior on Firefox and IE. No other styles are involved. If it is a bug, Firefox and IE both have it. Perhaps <fieldset> defines a new BFC?

Thanks,

Barry

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

*Not* clearing external floats; why does a FIELDSET work?

Your attached example html is missing from your post.

In IE, its whether or not an element hasLayout that is crucial rather than (or more than) whether it creates a new block formatting context. By giving the element some dimension you are putting it into hasLayout mode. Something odd is going on with your code, IE does clip elements properly when they have overflow:hidden and a specified height (not auto). Its probably safer to use width:100%; unless of course you are restricting the width of the fieldset or you have horizontal margins or padding.

fyi: hasLayout | On having Layout

bjaspan
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-5
Joined: 2006-02-22
Posts: 5
Points: 0

*Not* clearing external floats; why does a FIELDSET work?

Here is my sample showing how <fieldset> affects clearing behavior. Id's item1 and item2 are identical except for the fieldset.

Thanks for the tip about using width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* { margin: 3px; }
BODY { background-color: white; }
#test1, #test2 { border: 1px solid black; }
.body { margin-left: 170px; }
.item { background-color: #999999; }
.clearing { clear: both; }
.sidebar {
  float: left;
  width: 150px;
  background-color: #999999;
}
P.left {
  float: left;
  border: 1px solid black;
}
FIELDSET { border: 0; margin: 0; padding: 0; }
</style>
</head>
<body>

<div id="test1">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  
  <div class="body">
    <div class="item">
      <p class="left">left</p>
      <p>item 1</p>
      <div class="clearing">&nbsp;</div>
    </div>
  
    <div class="item">
      <p class="left">left</p>
      <p>item 2</p>
      <div class="clearing">&nbsp;</div>
    </div>
  </div>

  <div class="clearing">&nbsp;</div>
</div>

<div id="test2">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  
  <div class="body">
    <fieldset><legend></legend>
    <div class="item">
      <p class="left">left</p>
      <p>item 1</p>
      <div class="clearing">&nbsp;</div>
    </div>
    </fieldset>
  
    <fieldset><legend></legend>
    <div class="item">
      <p class="left">left</p>
      <p>item 2</p>
      <div class="clearing">&nbsp;</div>
    </div>
    </fieldset>
  </div>

  <div class="clearing">&nbsp;</div>
</div>

</body>
</html>

Barry

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

*Not* clearing external floats; why does a FIELDSET work?

I have no idea. My understanding is it shouldn't happen. I vote its a bug.

Shock

Here is a slightly simpler example (IE = hasLayout) & example (IE <> hasLayout)

Notice that although fieldset does stuff IE, it does the same stuff as hasLayout does.

bjaspan
Offline
newbie
Last seen: 13 years 49 weeks ago
Timezone: GMT-5
Joined: 2006-02-22
Posts: 5
Points: 0

*Not* clearing external floats; why does a FIELDSET work?

Okay. At least I'm not crazy. -)

Thanks,

Barry