I have discovered a problem with Google Chrome. When I have elements in
is there a way to fix this, maybe a special bit of css to add?
Here it is in a much better format.
You shouldn’t be using   for adding margin/padding. Rather, embrace CSS to support this for you – I’ve added the margin to the UL itself rather than the LI’s as ultimately they’re your list containers.
I’ve also added a clearfix in as we’re floating the UL elements which means the containing footer div doesn’t collapse, so make sure to retain that.
To go a little off-topic here: is this clearfix method still the way to go nowadays? Or perhaps again? Personally, I never preferred the :after thing (big supporter of separating content and layout), and I use overflow:hidden or a float on the container element to make it wrap its contents, but if that is already outdated (again), I’d be happy to hear about it! :)
Clearfixing is the best route to go as otherwise adding in
etc is un-semantic. It’s all much of a muchness but Clearfixing is IMO the best route to go as adding markup purely for presentation isn’t the best way to go.
The clearfix I’ve used is from http://nicolasgallagher.com/micro-clearfix-hack/
I know what you mean, I wouldn’t use an additional clearing div either. But what I meant, is your method of clearfixing still the preferred/recommended method? I thought it was not needed anymore at all — by putting overflow:hidden on the containing element, or floating it.
It’s details I know, but was just wondering what today’s unofficial “standard” is for clearfixing.
EDIT: see final paragraph of Nicholas’ article ;)
Unless I’m mis-understanding what he’s written he’s actually talking about the trailing . that might appear in legacy versions of Firefox?
When you say “not needed anymore” I assume you mean for newer browsers? Potentially – but it’s always best to use a backwards compatible clearfix.
Additionally – I don’t know if floating your parent will be an option – for example, unless it’s the wrapper div it’s also going to need it’s parent to clear it (and so on).
Even then, only applying it to the wrapper will not clear children of children.
I think you misunderstand me. ;)
In this very example, you use the
content:"" method on the footer to clear it. Without that clearing, the footer just doesn’t wrap around the lists: http://jsfiddle.net/mnFNQ/4/ (gave the footer a border so it’s clear that it doesn’t have a height and that the lists aren’t “in” it).
So to fix this, you could use the clearfix method, but (in my humble opinion) it’s a lot simpler to just give the footer the property overflow:hidden: http://jsfiddle.net/mnFNQ/5/
Which is my personal preference to clear floats, over the
Anyways, never mind!
You raise a good point so it’s definitely worth discussion. I know there are draw backs to using overflow: hidden, such as if you purposefully want to position a div partially outside the element for example. Additionally – I’m under the impression things like drop-shadow in CSS won’t work in such a scenario as they’ll be clipped if the elements are against the edges.
Whereas both will work with if clearfix:after is used instead.
Maybe we should start a new thread?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".