homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Clearing floats and confusion
How to find a reliable method
thesheep

10+ Year Member



 
Msg#: 3281582 posted 12:42 pm on Mar 14, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3281582 posted 2:13 pm on Mar 14, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3281582 posted 3:37 pm on Mar 14, 2007 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3281582 posted 4:17 pm on Mar 14, 2007 (gmt 0)

Can you post an example that demonstrates the behavior?

PSWorx

10+ Year Member



 
Msg#: 3281582 posted 4:56 pm on Mar 14, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3281582 posted 4:56 pm on Mar 14, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3281582 posted 4:59 pm on Mar 14, 2007 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3281582 posted 5:24 pm on Mar 14, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3281582 posted 5:25 pm on Mar 14, 2007 (gmt 0)

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

PSWorx

10+ Year Member



 
Msg#: 3281582 posted 6:02 pm on Mar 14, 2007 (gmt 0)

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

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3281582 posted 6:47 pm on Mar 14, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3281582 posted 11:14 am on Mar 15, 2007 (gmt 0)

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

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3281582 posted 11:53 am on Mar 15, 2007 (gmt 0)

(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

10+ Year Member



 
Msg#: 3281582 posted 4:03 pm on Mar 15, 2007 (gmt 0)

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved