You all know the old ‘floated elements inside a container cause the container to collapse’ problem?
Well, up until recently, I’d always just called on an old friend, .clearfix, and he’d sorted it out for me. I met .clearfix three or four years ago, and hardly a project has gone by since where I haven’t required his services. You know, I didn’t really ask him how he did it; he’d just quietly go about his job as I directed him, much like Michael Clayton, but without the gambling problem.
But yesterday, when I asked him to help out a colleague for me, little did I know I’d given him his last assignment.
Something happened early this morning – completely coincidentally. A little bird (or rather a tweet) came by and told me that, despite the fact Blueprint CSS uses .clearfix, .clearfix was no longer the way to go. And to be honest, it was almost a relief; the reason I’d never really asked .clearfix how he did his work was that deep down I knew that he was really a hack, and that if I just turned a blind (or ignorant) eye, then I could just pretend like everything was okay and we could all just carry on getting work done.
.clearfix is indeed inelegant, and really is a hack. And would you believe that the alternative solution is not so tricky…
Using overflow: auto; (or overflow: hidden;) on the container with a width will sort it all out for you.
Rather than explain it all here, I’ll just link to a few articles that have already put further effort into describing this:
- PPK’s Clearing floats
- Alex Walker’s Simple Clearing of Floats
- nclud’s Mind The Gap: clearfix is clearly broken
So, farewell, .clearfix, you’ve served us well.
…and thank you, MB, for the enlightenment.
You were enlightened by the Mario Brothers? Cool!
Clearfix is indeed ugly and it’s use in my arsenal has been more laziness and frustration more than anything else. I’ll take Matt’s advice too I think.
Happy to share. I normally pair it with, yes, some form of hack to trigger hasLayout in IE, but at least the primary CSS file stays fairly clean.
Thanx for your support.
overflow: auto(or hidden ) really worked well….
and it’s short and crisp.
Predicated on these records, you’re able to know when the boot is to your advantages or
the dealership.
Hi there, yeah this paragraph is in fact pleasant and I
have learned lot of things from it concerning blogging.
thanks.
When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment
is added I get several emails with the same comment.
Is there any way you can remove me from that service?
Many thanks!
Attractive component to content. I just stumbled
upon your web site and in accession capital to assert that I get
in fact loved account your weblog posts. Any way I will be subscribing in your feeds and even I
success you get admission to persistently fast.
Its like you learn my thoughts! You appear to know a lot about this,
such as you wrote the book in it or something. I believe that you can do
with some p.c. to pressure the message house a little bit,
however other than that, that is excellent blog. An excellent read.
I’ll certainly be back.
Pretty! This was a really wonderful article. Thank you for supplying
this information.
Fantastic items from you, man. I’ve take into account your stuff previous to and you’re just extremely great.
I really like what you have got right here, really like what you are
saying and the way in which by which you assert it.
You make it entertaining and you continue to care for to stay it wise.
I can not wait to read much more from you. This is actually a wonderful
website.
This website really has all of the info I wanted concerning this subject and didn’t
know who to ask.
Your means of telling everything in this article
is in fact good, every one be able to without difficulty understand it, Thanks
a lot.
I do not know whether it’s just me or if everybody else encountering problems
with your blog. It seems like some of the written text in your content are running off the
screen. Can someone else please provide feedback and let me know if this
is happening to them as well? This may be a problem with
my browser because I’ve had this happen before.
Many thanks
certainly like your website but you need to check the spelling on quite a few of
your posts. Several of them are rife with spelling problems and
I to find it very troublesome to inform the reality nevertheless
I will surely come again again.
My spouse and I stumbled over here different website and
thought I might as well check things out.
I like what I see so i am just following you. Look forward to looking over your web page repeatedly.
This information is worth everyone’s attention. How can I find out more?