homepage Welcome to WebmasterWorld Guest from 54.145.191.14
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Simple Clearing of Floats
latest news in case you've missed it
SuzyUK

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



 
Msg#: 5826 posted 11:14 am on Mar 2, 2005 (gmt 0)

CSSland is abuzz with a "new" method of clearing Floats in FF/gecko

An article inspired by a comment from Paul O'Brien where he points out that adding overflow: auto; (or hidden**) to an outer div will make it enclose it's floated children.

Paul O'Brien, nonchalantly pointed out that adding a 'overflow:auto' to the outer DIV did the trick.

The W3C recommendations [w3.org] do indeed seem to support that (10.6.6 and 10.6.7)

** Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible';

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.

I do see a lot of instability with using this, except in simple layouts with no other positioning, as FF has some (a lot) problems with the overflow property, but it's always useful to have another tool for the box.

At the minute it seems like only Gecko/Moz has been trying to support this particular recommendation. Opera still needs a width on the enclosing div in order to make it mimic IE's "auto-enclosing" behaviour.

Need to do some more testing on it, but in some very quick tests I did I found that there were clearance problems using overflow: auto; on a div which appears after previous floated floated elements. clear:both; can be used but margins on the enclosing div don't seem to be honoured.
IE5/Win leaves space for a scrollbar in all situations so if pixel perfect "column" widths were required then the overflow property needs to be hidden from IE.

Good spot though and worth keeping a eye on for next update of FF if they fix the other overflow bugs..

Suzy

 

encyclo

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



 
Msg#: 5826 posted 7:55 pm on Mar 2, 2005 (gmt 0)

Nice find, Suzy. I've been looking at this a bit: you can make IE behave if you use the underscore hack to give a height of 1%, but that's an ugly hack. However,
overflow:auto; seems to work OK in Opera 8 beta 1 as well, even if as you say overflow is wobbly in Gecko in a more complex layout.

Here's my test page, for anyone interested:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>testing floats and overflow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
border:1px dashed red; /* just to show div positions */
}

div#test {
background:#ffc;
overflow:auto; /* for Gecko and Opera 8 */
_height:1%; /* for IE */
}

div#floattest {
width:200px;
float:left;
}
</style>

</head>
<body>

<div id="test">
<div id="floattest">
<p>text floated left, should have yellow background only when overflow is set to auto</p>
</div> <!-- close floattest div -->
<p>more text in the non-floated div, yellow background all the time</p>
</div> <!-- close test div -->

</body>
</html>

I don't have Opera 7.54 so I can't test it in that, but it might work there too - same goes for Safari (but that's less certain).

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5826 posted 9:18 pm on Mar 2, 2005 (gmt 0)

Suzy, thanks for bringing this to our attention.

If the FF overflow problems get cleared up, this method would make a nice replacement for floating the container in situations where floating the container causes other problems (in clear riddled pages, for instance).

you can make IE behave if you use the underscore hack to give a height of 1%, but that's an ugly hack

Thre could be a thousand situations where this would snarl things up more than it would help, but in variations of your (encyclo) test page, using height:100% worked and didn't cause problems. I added other page structures (container, header, footer) around the #test div and 100% still did the job, so it could be an option for getting IE to play ball without the hacking.

cEM

MatthewHSE

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5826 posted 9:50 pm on Mar 2, 2005 (gmt 0)

I can see the possibilities with this method. Although, with 85% of my visitors still using IE, I think I'll still stick with my current method of adding an extra clearing div below floats. (Sure, that's a semantic faux pas, but it's pretty steady cross-browser . . . )

Slightly off-topic, what problems does FireFox have with the overflow property? I thought it was about the only browser to get it right.

Even more off-topic, does anyone know yet if IE7 will contain any better CSS support? I'm kind of getting fed up with "this works in that browser, hack to get this one right," etc.! ;)

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5826 posted 10:03 pm on Mar 2, 2005 (gmt 0)

My understanding is that IE7 [dean.edwards.name] works great, but Internet Explorer 7 probably won't. ;)

Actually, Dave Shea talks about IE7 (the browser) here [mezzoblue.com]. Doesn't look too promising and, as he rightly points out, even when version 7 rolls along, we're still going to be supporting IE6 well into the forseeable future.

cEM

MatthewHSE

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5826 posted 10:21 pm on Mar 2, 2005 (gmt 0)

My understanding is that IE7 works great, but Internet Explorer 7 probably won't.

Okay, so I left myself wide open for that one! ;) Yes, Dean Edwards' IE7 works very well. Which makes me wonder, has anyone tried this float-clearing method in IE, with the IE7 javascript on the page? I may have to give that a shot if I have any spare time this evening.

One thing we could still hope for is that decent CSS support will SOMEHOW make it into Internet Explorer 7, and that with all the auto-update Windows XP boxes out there, the new version will quickly claim the majority of IE use...

SuzyUK

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



 
Msg#: 5826 posted 9:39 am on Mar 3, 2005 (gmt 0)

encyclo..

the underscore hack is not really required, IE does need it's usual layout hack, (dimension) to trigger it's enclosing behaviour but Opera (at least <=7.54) also needs a width in order to make it mimic IE (this could be the bit you don't need in v8 though) so it needs to be more like:

div#test {
background:#ffc;
overflow:auto; /* for Gecko and Opera 8 */
width: 100%;/* for IE and Opera */
}

MatthewHSE wouldn't ya know re: FF overflow bugs.. I lost the test page I had open and now I can't find a sample.. will keep looking. But last week I went to report an overflow bug and found so many that I couldn't see if the one I was trying to report was already reported. :o

Let's put it this way, if you have a flickering adsense panel, either on load or or on hovered links then I'm pretty sure that using overflow somewhere will fix it but if you have weird padding issues it's likely caused by overflow..

<added> found an example for you:

<style type="text/css" media="screen">
div {
padding: 10px;
background: #ddd;
width: 200px;
overflow: auto;
}

p {margin: 0.5em;
background: #fff;
}

</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

that shows extra padding(?) at the bottom of the grey div but if you resize the window smaller the extra padding moves to the right side of the div.. maximise the window and it stays at the right, hit refresh and moves back to the bottom.. I just typed that from memory and can't remeber all the nuances, but I found that the extra padding is related somehow to line height and the length of the paragraphs!.

I am wondering if that in Gecko/FF's quest to get support of overflow correct(per recommendations) that they have actually caused themselves some other problems?

Suzy

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