16 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Paul O'Brien has come up with an incredibly simple method of clearing float containers.
As a bit of background to this problem you might like to look at Contained Floats, here or How To Clear Floats Without Structural Markup which explains the problem and a solution quite well.

Pauls method is to set the overflow property of the containing element to auto and it looks to do the trick so far in most browsers.
Here's an example page.
There have been other write ups and comments at fiftyfoureleven.com
You can't get much simpler a solution then that, well done Paul.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

New Clearing method for containers of floats

Wow Shock - we are not worthy! All hail PB and thanks for the heads-up Tony Smile

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 27 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

New Clearing method for containers of floats

Elegant, utterly simple and totally counterintuitive. But isn't that the way things are with CSS. We have seen the Tantek hack replaced by the Modified SBMH and other examples of once complex work-arounds being superseded by simple techniques.

An interesting by-product of this new technique (and I have only tried this in FF) is that if #inner gets a height:100% it continues the div and its background to the bottom of #outer without resorting to the faux columns technique. I haven't had the time to mock up a page yet to test it in other browsers. Wouldn't it be nice to be able to kill two CSS birds with one stone?

Later: Have experimented a bit with my observation - in FF it works but is unstable and won't reflow properly and in IE its a washout. Ah, well, I gues I'll have to wait a little longer to get my name on a method.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New Clearing method for containers of floats

Well blow me down, it's just too simple Shock I'm utterly gob smacked .

So all those lengthy posts explaining how to clear floats could have been covered by "add overflow:auto" .

Thanks for the info Tony, I still like your solution though Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 27 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

New Clearing method for containers of floats

After playing around with this a bit, I think I will continue using Tony's method since it seems to be more robust if one is dealing with additional floated content, esp in older browsers. I haven't had a situation where Tony's method has broken on me. As I have posted before, I add a position:relative; to the .clearfix to enable it to better handle additional floated content in IE5.x.

OK. I still want a simple elegant fix to replace the faux columns kludge. Any takers?

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

New Clearing method for containers of floats

I wonder what mechanism is at work that causes a container to enwrap an out-of-flow child. Is it an unintended consequence that will disappear with the next version of whichever browser? If it's intended, where's the documentation?

At this point, I have to go along with David and use the clear property for its documented behavior. Like David, I've had no breakage using Tony's hack, as modified. The only thing about that that is likely to ever break is the Holly Hack, and then only if IE conforms to standards. I won't hold my breath waiting for that.Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

My preceeding post sucks

:oops: :oops: :oops:
There is indeed documentation.

css2.1cr wrote:
10.6.6 Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible'; 'inline-block', non-replaced elements; and floating, non-replaced elements

10.6.7 'Auto' heights for block formatting context roots

In certain cases (see the preceding sections), the height of an element is computed as follows:

In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

So two things are required:
  1. Height must be 'auto', the default.
  2. Overflow must be other than 'visible', the default.
I often (in my few tests) get a horizontal scrollbar, say to cover borders, when using {overflow: auto;}. Using {overflow: hidden;} appears to have no side effects.

Testing involves only IE6, Firefox1.0, Mozilla1.7.1, and Opera7.54 on Windows and Firefox1.0 and Mozilla Debian 1.7.5-1 in Gnu/Linux. I'll leave the khtml engined Konqueror and Safari, and the IE/Mac for others to test.

I'll want to gain a bit of experience before depending on this. It's just too damned simple and easy to be true.

Maybe next time I'll RTFM a bit before mouthing off.

cheers,

gary

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New Clearing method for containers of floats

Having played with it this evening and although it does indeed seem to work albeit with a nasty scroll bar appearing due to forgetting to neutralize the clearing fix ;
I feel that I have to agree with Gary and David in that I think I will continue to use Tony's fix as I understand the use of clear and the elegant means of dispensing with the extra div employed; but with this new fix I'm not sure why it's working which worries me, I would rather stick with something I understand for the moment.

Ah just seen your posted documentation Gary, See you should have looked for it first Smile
Hm, I still think I shall be sticking with what I know.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 11 years 27 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

New Clearing method for containers of floats

I keep getting scroll bars in Firefox on some div's with this method...
anyone else or am I not implementing correctly?

s

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

New Clearing method for containers of floats

Look two posts up. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

method fails; my error?

While playing with something entirely different, I tried to use the {overflow: auto;} method of clearing floats.

The test cases have a parent element of {height: auto;} with three children, two floats and one static. Case one has no clearing method. Case two uses {overflow: auto;}. Case three uses Tony's clearing hack. Cases one and three render as expected. Case two works in Firefox, fails gracefully in IE, and fails ugly in Opera.

The tested browsers are Firefox1.0, IE6, and Opera7.54. There are wildly different results. Have I made an error in coding, or is this actually a failure of the method? Can you replicate the behavior I found?

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
  <meta name="generator" content=" 
  HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> 
  <meta name="editor" content="Emacs 21" /> 
  <meta name="author" content="Gary Turner" /> 
  <meta http-equiv="content-type" content=" 
  text/html; charset=us-ascii" /> 
 
  <title>3-boxes and the overflow clear</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
 
p { 
    margin: 1em 0; 
    } 
 
.b0 { 
    padding: 10px; 
    border: 1px solid blue; 
    } 
 
.clear { 
    overflow: auto; 
    } 
 
.b1, .b2, .b3 { 
    border: 1px solid gray; 
    } 
 
.b1, .b2 { 
    width: 70px; 
    float: left; 
    margin-right: 5px; 
    } 
 
.b3 { 
    margin-left: 155px; 
    } 
 
/*** see http://www.positioniseverything.net/easyclearing.html 
   for explanation of Tony Aslett's elegant hack ***/ 
 
.clearing:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-block; 
    } 
 
/* Hides from IE-mac \*/ 
* html .clearing { 
    height: 1%; 
    } 
.clearing { 
    display: block; 
    } 
/* End hide from IE-mac */ 
/*** end clearing hack ***/ 
 
/*]]>*/ 
 
</style> 
</head> 
 
<body> 
  <div class="b0"> 
    <p>The parent container</p> 
 
    <p>There is no clearing method.</p> 
 
    <div class="b1"> 
      <p>some float stuff</p> 
 
    </div> 
 
    <div class="b2"> 
      <p>some float stuff</p> 
 
      <p>and more float stuff</p> 
    </div> 
 
    <div class="b3"> 
 
      <p>some static stuff</p> 
    </div> 
  </div><!-- end b0 --> 
 
  <p>something else</p> 
 
  <div class="b0 clear"> 
    <p>The parent container</p> 
 
    <p>This container uses the {overflow: auto;} clearing method.</p> 
 
    <div class="b1"> 
      <p>some float stuff</p> 
    </div> 
 
    <div class="b2"> 
      <p>some float stuff</p> 
 
      <p>and more float stuff</p> 
    </div> 
 
    <div class="b3"> 
      <p>some static stuff</p> 
    </div> 
  </div><!-- end b0 --> 
 
  <p>something else</p> 
 
  <div class="b0 clearing"> 
    <p>The parent container</p> 
 
    <p>This example uses Tony's hack to clear the floats.</p> 
 
    <div class="b1"> 
      <p>some float stuff</p> 
 
    </div> 
 
    <div class="b2"> 
      <p>some float stuff</p> 
 
      <p>and more float stuff</p> 
    </div> 
 
    <div class="b3"> 
 
      <p>some static stuff</p> 
    </div> 
  </div><!-- end b0 --> 
 
  <p>something else</p> 
</body> 
</html>
tnx,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Helen
Offline
Enthusiast
NYC
Last seen: 14 years 43 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

New Clearing method for containers of floats

I have the same results on a Mac with your exact code, gary.

Case two works in Firefox1.0, works in Safari1.2, works (at least as far as the clearing goes) in MacIE5.2, works in Netscape 7.2 - but fails in Opera7.54.

A couple of screenshots attached.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

New Clearing method for containers of floats

Hi kk5st,
I think the new method (overflow:auto;) has problems with complex structures.
I haven't really had time to test it out but did try to use it at work for a new template that contained multiple floated elements and other non floated elements ( can't remember if they were positioned or not ) any way the new method failed in IE so I reverted back to my method.

If I have time and some inspiration I will have a look and see what caused it to fail.

Helen
Offline
Enthusiast
NYC
Last seen: 14 years 43 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

New Clearing method for containers of floats

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

New Clearing method for containers of floats

Thanks, Helen and Tony. I was afraid I'd made some silly error that I couldn't see for its familiarity.

It looks like Opera is the worst of the bunch—at least IE/Win fails gracefully, and the Holly hack would take care of it.

I guess as long as Opera can't handle it properly, we're going to have to stay with variations on {clear: both||left||right;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New Clearing method for containers of floats

Nice work Gary,
So sort of sums up earlier fears, best to stick to a method that is understandable and proved .

Strange I found that given a width definition on the parent, Opera clears all elements, fixes or no, even 1% clears height wise although not width wise.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

New Clearing method for containers of floats

Hugo wrote:
<snip>
Strange I found that given a width definition on the parent, Opera clears all elements, fixes or no, even 1% clears height wise although not width wise.
Hmm, looks like Opera is an IE wannabe, invoking 'has layout'. The trouble is, I don't know how you make a rule Opera specific. Is there an Opera version of the Holly hack out there?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.