Clearing floats

HTML & CSS
1

OK, so I’ve read a few posts about this - I know it’s a controversial subject, but I can’t quite work out what the recommended method is these days.

I ask because I have a page: http://www.tnc-branding.com/wordpress/clients/ where the wrapper is not containing the right side div.

Now, also probably controversially, I’m using the 960grid (I’m invested in it and normally I very much like using them, especially with clients who insist on adherence to pixel-perfect grids).

Anyway, I can’t work this one out. I’ve used this grid before with no clearing issues without using clear:both divs, but this time it’s not working no matter what I do.

Not sure what code would be useful to include as it might be easier just to view it using firebug or similar?

Appreciate any insight…

2

Adding overflow: hidden to .container12 solves it for me. In fact just the first one needs it, but it doesn’t hurt on the second one (no effect).

For more info you can also read this: http://www.visibilityinherit.com/code/contain-floats.php

3

Hmm. When I do that it simply hides the overflow (as you might expect).

But that’s not really what I’m aiming for - rather I’d like the left hand column to expand to fit the length of the very long right side content.

Unless I’m missing something?

800×330 33.9 KB

4

Yeah, you do need the overflow: hidden, but you also need to remove position: absolute from here:

#rtNav {
border-top: 1px solid #AFAFAF;
[COLOR="#FF0000"]position: absolute;[/COLOR]
top: 132px;
height: 100%;
}

Never use position: absolute for laying out major parts of a page, as it takes elements out of the document flow, meaning that other elements don’t see them and thus don’t account for them.

Also get rid of the top and height settings.

5

Ah, that’s done it - thanks.

It doesn’t seem to need overflow:hidden, in fact, with the absolute positioning removed.

Not sure why I did that in the first place, to be honest - must have been trying desperately to fix something, but I’m not entirely sure what!

6

True, yes. The container12 doesn’t need to wrap around the floated content, but if you had a background color on it, or some bottom margin, you’d certainly need it.

7

Thanks. I’ll keep that in mind if any bottom margins show up on any of the layouts.

Nice to be able to remove all the clear divs too. I’d put them virtually everywhere in the hopes of fixing that sidebar thing!