SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi jimboidaho. Welcome to SitePoint.

    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.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph. overflow:hidden did the trick. I would have never thought that hiding overflow cause it to show .

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jimboidaho View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •