Comments on: Simple Clearing of Floats http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ News, opinion, and fresh thinking for web developers and designers. The official podcast of sitepoint.com. Sun, 08 Nov 2009 18:10:55 -0500 http://wordpress.org/?v=2.8.4 hourly 1 By: Alex M http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-883944 Alex M Thu, 26 Feb 2009 19:51:12 +0000 479200509#comment-883944 Thanks! Just used this on a project :) Thanks! Just used this on a project :)

]]> By: Anonymous http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-883164 Anonymous Wed, 25 Feb 2009 07:33:23 +0000 479200509#comment-883164 Robert, if you are adding DIVs anyway, surely you may as well just make them clear: all divs and get rid of the problem that way? Frankly, overflow: auto was a major headache in IE6 rendering and I wish I hadn't bothered. Give me the old fashioned clear: all method any day. Robert, if you are adding DIVs anyway, surely you may as well just make them clear: all divs and get rid of the problem that way?

Frankly, overflow: auto was a major headache in IE6 rendering and I wish I hadn’t bothered. Give me the old fashioned clear: all method any day.

]]> By: may http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-877288 may Thu, 12 Feb 2009 20:20:04 +0000 479200509#comment-877288 "whaa..." so simple. it works! thanks =) “whaa…” so simple. it works! thanks =)

]]> By: AlexW http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-872623 AlexW Mon, 02 Feb 2009 23:06:36 +0000 479200509#comment-872623 That's interesting to know, Robert. I'll have to do some testing to check it out. That’s interesting to know, Robert. I’ll have to do some testing to check it out.

]]> By: Robert B http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-872362 Robert B Mon, 02 Feb 2009 16:53:42 +0000 479200509#comment-872362 Using the "overflow: auto; height: 100%;" method, I noticed a small issue appear in both FF and IE. The entire page took significantly longer time to render, presumably waiting on all the code to load before it could calculate how much "100 percent" actually was. In my example the item floated is an image whose size is explicitly declared, followed by a line of text as a header and a paragraph element. In the default 1em font size the text elements together are not as tall as the graphic. <code><div style="overflow: auto; height: 100%;"> <img src="myimage.jpg" style="float: left; border: 0; margin: 0 10 0 0; padding: 0; height: 96px; width: 96px;"> <div style="font-weight: bold; font-size: 1.5em;">My Header Text Here</div> <p>My paragraph text here.</p> </div> </code> What I found that helped was to enclose all of this in yet another <div></div> which in my experience cut the rendering delay down considerably. Has anyone else noticed this render time issue? Using the "overflow: auto; height: 100%;" method, I noticed a small issue appear in both FF and IE. The entire page took significantly longer time to render, presumably waiting on all the code to load before it could calculate how much "100 percent" actually was. In my example the item floated is an image whose size is explicitly declared, followed by a line of text as a header and a paragraph element. In the default 1em font size the text elements together are not as tall as the graphic.
<div style="overflow: auto; height: 100%;"> <img src="myimage.jpg" style="float: left; border: 0; margin: 0 10 0 0; padding: 0; height: 96px; width: 96px;"> <div style="font-weight: bold; font-size: 1.5em;">My Header Text Here</div> <p>My paragraph text here.</p> </div>

What I found that helped was to enclose all of this in yet another <div></div> which in my experience cut the rendering delay down considerably.

Has anyone else noticed this render time issue?

]]> By: peach http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-868608 peach Mon, 26 Jan 2009 16:58:28 +0000 479200509#comment-868608 I've just had an occassion where the overflow:auto worked unreliably in Firefox 2. I had no problems whatsoever in ff3 or any other browser but when I was doing a Quality Assurance round with Firefox2 I noticed that the clearing of a flexible-width footer's contents failed while stretching the width of the viewport to certain points. seemingly random and only at 1% of all points you can drag the side of your browser. I swapped the overflow:auto for a PIE-style clearfix class and all was good again. I’ve just had an occassion where the overflow:auto worked unreliably in Firefox 2.
I had no problems whatsoever in ff3 or any other browser but when I was doing a Quality Assurance round with Firefox2 I noticed that the clearing of a flexible-width footer’s contents failed while stretching the width of the viewport to certain points. seemingly random and only at 1% of all points you can drag the side of your browser.

I swapped the overflow:auto for a PIE-style clearfix class and all was good again.

]]> By: AlexW http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-859278 AlexW Thu, 08 Jan 2009 23:17:44 +0000 479200509#comment-859278 @effectwave That's a strange little problem. Had a quick look and can't pinpoint the exact issue. However, it seems feasible to rearrange your CSS to get the right result. Simply take out the BG color of the center div and the overlap is invisible. The BG color of the wrapper stretches with the columns fine. As long as you have 3 columns with the same BG color, this should be ok? @effectwave

That’s a strange little problem. Had a quick look and can’t pinpoint the exact issue. However, it seems feasible to rearrange your CSS to get the right result.

Simply take out the BG color of the center div and the overlap is invisible. The BG color of the wrapper stretches with the columns fine. As long as you have 3 columns with the same BG color, this should be ok?

]]> By: Keli http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-859220 Keli Thu, 08 Jan 2009 20:09:45 +0000 479200509#comment-859220 I LOVE YOU I LOVE YOU

]]> By: effectwave http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-859181 effectwave Thu, 08 Jan 2009 18:30:34 +0000 479200509#comment-859181 This method (overflow:auto/ hidden) works great with the main <em>wrapper div</em> containing two more divs. But this doesn't seem to work with a <em>wrapper div</em> containing three divs. This problem is only visible in Firefox. In IE everything works fine. I have created a page where there are two columns in the top div which work fine, but the three columns in the bottom div don't align properly. Here is a URL to my website. http://www.webdesignmatching.com/ee/quotes.htm Any ideas? This method (overflow:auto/ hidden) works great with the main wrapper div containing two more divs. But this doesn’t seem to work with a wrapper div containing three divs. This problem is only visible in Firefox. In IE everything works fine.

I have created a page where there are two columns in the top div which work fine, but the three columns in the bottom div don’t align properly. Here is a URL to my website.

http://www.webdesignmatching.com/ee/quotes.htm

Any ideas?

]]> By: derky http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/comment-page-3/#comment-856933 derky Fri, 02 Jan 2009 16:25:38 +0000 479200509#comment-856933 EXTREMELY HELPFUL THNX!!!!!!! EXTREMELY HELPFUL THNX!!!!!!!

]]>