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?

  • Can you post a screenshot of what is wrong? I don't see anything that looks bad for those three middle columns. – Nate Apr 15 '11 at 20:33
  • I'm at work so I don't have access to the FTP to change it, but basically that big white container that has all the text and those three columns only extends to like 3/4 of the way down the columns. it cuts off like its a float problem. I used a div with clear: both and that didn't work. so my temporary fix was to set a static height – Maddy Apr 15 '11 at 20:43

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:


| improve this answer | |

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.