: Clearing floats? Or something else? I'm working on this website for my dad: http://smartcampusdeals.com/TendonAiD/index3.html and the three columns (with the stick cartoony people) extend past the

@Fox8124981

I've used several different approaches for this problem in the past.

The best one so far is:
#logos { zoom: 1; overflow: hidden; }

Basically just setting the container of the floats to overflow: hidden or auto fixes this behavior in most browsers.

Of course this doesn't always work in IE (what else is new). That's what the zoom: 1; is for.

Vote Up Vote Down

@Pope3001725

This is the classic 'collapsed parent' problem, created by floating an element, but not its parent. In your case you have a float on #feature -text and its children, but not #content -wrapper.

There are four CSS solutions, although one of the main two should work for you:

Either add another clear float - <div class="clear"></div> - at the end of the content wrapper, or give the content wrapper the css overflow:hidden.

This good article explains the theory and the other two possible solutions:
www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Vote Up Vote Down