Fluid Height two/three column css designs

I am trying to figure out how to quit using tables for column design. I have everything working except when the content gets taller then the body of my page. It seems that when divs are floated left and right then they also float down hiding my page footer when the content grows (I am using ajax a lot). Any ideas how make the parent wrapper div grow when one of the the columns grow in length? I really need to push the page footer down.

Thanks.

Hi jimboidaho. Welcome to SitePoint. :slight_smile:

I’m not totally sure I understand what you are describing (feel free to post a link) but try adding something like clear: both; to your footer and see if that helps. Floated elements are taken out of the document flow, so other elements can sort of stop seeing them unless you take a few precautions.

Another option (my preferred) is to wrap the two floated columns in a container div and apply overflow: hidden; to that container. That prevents any following, non-floated items from slipping under the columns too.

Thanks ralph. overflow:hidden did the trick. I would have never thought that hiding overflow cause it to show :).

Yes, seems funny, but by default, floated elements hang outside of their containers, which can cause layout problems, and the simplest way to force a container to wrap around its floated contents is with the overflow property. Apparently the reason it works is that to obey the rule, the container has to take a look at its contents and enclose them.