Clearing floats and confusion

How to find a reliable method

[thesheep]

Sometimes it's necessary to clear floats in order to force a containing element to extend to the bottom of a floated element.

I'm not too bothered by the odd piece of extra markup, so I've been trying to put in an extra <br /> element after the floated element to force the clear:

<div>
 <div style="float: left">
 <!-- some content -->
 </div>
 <br style="clear: both" />
</div>

However, I'm finding that in some cases IE still doesn't clear the float. I'm not sure why (obviously there is a bunch of other code around on the page, which I guess is causing this somehow).

Sometimes, I'm able to force the float to clear only if there is some actual content in the element that forces the clear. Something like this:

<div>
 <div style="float: left">
 <!-- some content -->
 </div>
 <p style="clear: both; height: 0; overflow: hidden;">Some relevant but unnecessary text that won't show up in visual browsers</p>
</div>

And then IE does clear the float.

Anyone else find this?

I'm also interested in the new simple method of clearing that appears on the website Quirksmode:

div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}

But I'm not sure if it has 100% browser compatibility. Also, of course my container needs to have 10px horizontal padding, so this kind of messes up the whole idea of putting a width of 100% or it becomes vulnerable to box model problems.

Is there any really reliable (and hack-free) method people are using to clear floats like this?

[PSWorx]

The way i have had to do it is as follows, html:

<div class="clear"></div>

and the css,

.clear (or div.clear) {
height: 0px;
clear: both;
}

Obviously involves extra markup but should work a treat, the reason for the height being 0px was as the result of extra white space appearing so i assumed it was trying to display the div at normal line height, after applying the height the extra space was gone and cleared happilly.

throw that after the divs inside you container element, same place you have your <br />

If theres a problem regarding the need for content inside the div just throw in a transparent pixel 1px high which is another method i had to use in the past.

As for crossbrowser compatability it should work fine ive tested with most recent versions of ie, opera, ns, mozilla/firefox and ie6, i need to test on a mac but dont have one available at the moment, linux browsers seem ok but only tested with konqueror and firefox (1.5) - both on debian.

[thesheep]

Yes it's an interesting question. I don't really understand why BR and DIV elements should have any innate differences that can't be overridden by CSS. But nevertheless I've also sometimes found that they seem to behave slightly differently (especially in terms of phantom vertical margins). Maybe it's just browser bugs, or am I neglecting something?

So if we set:

.clear {
  display: block;
  height: 0;
  margin: 0;
  line-height: 0;
  clear: both;
}

is there any practical difference between

<div class="clear"></div>

and

<br class="clear" />

I seem to recall that there is sometimes...

[Fotiman]

Can you post an example that demonstrates the behavior?

[PSWorx]

Ok two html examples of a site i did recently which has no tables or raw images so dont be suprised at the crap looking output when u test it out, ive swapped the div for a br in the second example, use the same css and see how it works, note there is quite a bit of css here so the entire template works (wish i could show u the site, its shweeet baby):

CSS (from 2 of 5 css files :-s eek) :

too much code - removed - see charter please [webmasterworld.com]

[edited by: SuzyUK at 6:56 pm (utc) on Mar. 14, 2007]

[PSWorx]

HTML (entire template - using div for clear) :

<cut>

NOTE: HTML is abit messy as its compiled by my php template generator, the clear is used just below the header, ive modified the second bit of html to use a br, let me know the outcome, dont think this demo is all that good for this situation.

code removed as per above post

[edited by: SuzyUK at 6:59 pm (utc) on Mar. 14, 2007]

[PSWorx]

Off the topic but my method of creating extensible (vert and horiz) rounded corner backgrounds/borders/containers is there.

Also if there is an issue using br's as opposed to div's then the margin between the header contents and the body should be larger than the set 10px in the css, bloated example but should be able to demo if there is an issue.

[edited by: PSWorx at 5:01 pm (utc) on Mar. 14, 2007]

[Fotiman]

Give your br this style rule and that will fix it:

clear: both;
height: 0px;
display: block;

The br is an inline element. Giving it display:block will fix the height problem.

[thesheep]

Er... that's a very large amount of code. Maybe strip it down for the purpose of illustrating the concept?

[PSWorx]

Gawd i was pondering that earlier having a smoke regarding the br being inline and applying block styling onto it.

Regarding the example just nock one up your self three divs ontop of each other all with a border of black 1px then slap the div or br tag in somewhere with the class and see the difference altho setting the br as a block level element should probably clear up the differences.

[SuzyUK]

div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}

works fine,

overflow: auto;

is the way the compliant browsers (including IE7) contain floats the width: 100%; is to set hasLayout to true for IE6 and below, because that's what makes them contain floats so if you don't want to use width 100%, because of padding or whatever you could try height 0.1% - this will be fine as long the div cannot inherit a height from it's parent - or you can use zoom: 1;

Suzy

[thesheep]

Thanks Suzy, I'm trying that. It seems to work in most places, but where it doesn't is if I need a margin below the floated element (the margin disappears in IE). Adding padding to the bottom of the container doesn't seem to help either. So in this case I'm back to my <p class="clear"></p>.

Fontiman: even if I set display:block on the BR element, it still doesn't create exactly the same layout behaviour as the P element (in IE). It is strange, the P element seems to have some different, intrinsic property in that browser.

[SuzyUK]

(the margin disappears in IE)

hmmm.. it should be there? Maybe you're seeing another effect of IE float quirkiness where it's not the float margin that's disappearing but that of the floats content (could also be the reason why the clearing div solution is intermittent?)

#container {overflow: auto; background: #dad; zoom: 1;}
.fr {float: right; margin-bottom: 20px; background: #ffc;} 
.fl {float: left;}
/* p {margin: 1em 0;} */

<div id="container">
<div class="fl"><p>left floated box</p></div>
<div class="fr"><p>right floated box</p></div>
</div>

Note in this sample I've deliberately used <p> elements as they have default margins -

this collapsing/disappearing margin effect will happen with anything that has default margins and is inside the float - the cure is to specify explicit margins on such elements uncomment the p margin to see IE magically match FF

[thesheep]

Well I had several elements all floated left inside the container, and all with a bottom margin.

But after reading what you said, Suzy, I put them all inside a single, floated 'sub-container' and put the margin on that instead, and lo-and-behold: it works fine now.

Thanks!