Clearing floats? Or something else?

Question

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 container. Right now, I have the container set at a static height (700px or something) but I want the height to adjust, so I don't have to change it for every other page. Why are these three columns behaving that way and what can I do to fix it?

Answer 1

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:

http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Answer 2

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.