CSS clearing external float

Sic · 12 Mar 2007 at 16:45

Is it a CSS rule (sent to annoy me) that if you clear an element inside a container, it will clear any floated elements outside that container?

the horrible brown div should clear the green and red ones, so sit snugly under the green one, but it's jumping under the annoying purple one, just because it's floated. is there any way i can clear:inherit,left or something so that it ignores floats outside its container div? failing that there's going to be some ugly inline styling that i'd rather avoid!

thank you

Augmented · 12 Mar 2007 at 16:58

Try clearing the floats in your blue/lilac container element by giving it a property of overflow: auto;.

Sic · 12 Mar 2007 at 17:00

that didn't work. i want the horrible brown box to stay inside the lilac box. the purpley box is variable height, too

Augmented · 12 Mar 2007 at 17:21

/edit - actually forget that, I see what the issue is - will have a look later if I get the chance.

Sic · 12 Mar 2007 at 17:34

thank you. much appreciated

supercrewd · 12 Mar 2007 at 20:28

have you tried setting the clear to right instead of both? or, another idea is to create a empty div set to block and put that below the two boxes before the brown, i think they should give the effect your after, but will leave the height of the div as empty space.

If you could post the code it will help a lot more.

Sic · 12 Mar 2007 at 22:16

ooh, that's not a bad idea actually. i think i'll set a div at 100% of the parent. the divs above it are floated left, so clearing right won't work. and this is CSS you don't want to see. i'm afraid i'd be embarassed - i've taken it over from someone else, and there's no point messing with it. was just wondering if there was a quick fix, and you've given me a nice plaster to put over it til i can clean it up long term!!

thanks