Published in CSS on Sunday, February 27th, 2005
I was going to post this in the Links and Resources, however it looks like some testing is still needed, and, if it works, this is potentially great news (in a CSS liking kind of way). "Simple Clearing of Floats" over at Sitepoint - the website that I underestimated likes to resize my browser and piss me off - looks to have an easy solution to a common problem.
Sitepoint CSS guru Paul O'Brien has discovered that by applying overflow:auto to the CSS rules for a parent div that contains a floated element, the parent div will expand to completely contain the floated element.
Check out the Sitepoint blog post here, and the example here.
It seems that it was a browser setting and likely some accidental cookie deleting that lead to my misunderstanding of how Sitepoint deals with their popups. Kudos and thanks to Thomas Rutter for clearing things up with me, and for trying to do it right from the outset.
While I'm chatting about Sitepoint, is it not a little weird that they are using that browser manipulating pop-up that resizes Firefox every time I visit (or click within a page of) their site.
What the hell is up with that? They're clever people, set a cookie on my computer and let me only get that pop-up once, or once a week, but for the love of all things, don't do it to me every time I visit.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
Wow, this could be very useful, especially since I always use floats. :) Thanks!
Hmm, I am a bit suspicious as to why this should work. The overflow property doesn't affect the height of a box - according to the CSS 2.1 Rec. Although it seems to work in Firefox, Safari and IE Mac. But then again, most browser are slightly buggy (cough, cough) when it comes to the overflow property.
Me prefers the 'clearfix' technique over at PIE.
PS- No problems with SitePoint rezing my Firefox window - there is a preference in Firefox to block this kind of behaviour (under advanced Javascript options). I think I've blocked their pop up window as well.
Hey Philippe, thanks for the mac go-over. I didn't post this to the resources yet 'cause I wasn't sure if it was tested thoroughly yet.
I guess I am to blame for that pop up ;-) hehe, off I go to sort that out... Thanks!
Looks like it's actually supposed to work like this. Take a look at CSS 2.1 10.6.6 and CSS 2.1 10.6.7:
Man Roger, you do spend thousands of hours working with CSS... ;-)
Nice find.
Mike: Thank Anne for pointing it out in the comments over at my place :-)
Yeah, I just saw that. Specs on a Sunday, Yikes.
Good find for a collection of hac... ahem... tools! I wonder how consistent it is implemented across browsers.
As to Sitepoint and their ads---I agree with you. In fact, I nuked them off my RSS feed list precisely for that.
I was wrong in my first comment (don't read specs on Sunday evening... :-/). It should indeed work.
Bit of testing tells me that this seems to work across the board on Mac browsers, as long as you work with rather simple constructs as the sample file provided. Start including some more complex things, a bit of Absolute positioning (like for some Image Replacement methods), complex floated constructions, and I see problems in IE Mac (esp on OS 9, where it is still widely used), but also Netscape 7.0, 7.1, Opera 7.5, Mozilla 1.4 and Safari pre 1.2 (OS X 10.2).
Also, I'm wondering what the implications are for such 'erotic' things as the Peekaboo bug and other nice dishes on IE win.
At the moment, the clearfix method I mentioned above remains my tool of choice.
well it is a wow, well almost.. but applied to a simple two column with either a floated or positioned nav above it, it breaks :(
specs are conflicting here methinks. Perhaps FF in trying to honour them all, have been caught in the reality and that's why they have so many overflow (property) bugs? who knows..
until it's more apparent "float in float" remains my method of choice.. NN6 is the only legacy browser (apart from IE/Mac perhaps?) that requires the clearfix hack.
Yeah, it turns out that it isn't very robust... I just use the clearing <div> trick, as everything is run off of templates these days, it's not so hard to remove...
(Suzy from a UK IP... hmm... ;-)
Your site is very nice, compliment!
Hi Mike.. hmm maybe :)
It's a really useful 'first try' at fixing float bugs you might be having - if it doesn't work, then you've got the clearfix, :after, and all the other more complicated methods to try.
Yeah, I still prefer the sledgehammer "clearing div" method. No worries about any sort of 'house-of-cards' type things happening.