SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sticky footer w/ multiple container divs

    I can get my footer to sit on the bottom of the page, but for some reason the min-height:100% doesn't seem to be stretching the content itself down to meet it.
    Please accept that I need the container divs to affect graphics which aren't currently present.. I thought the min-height on background should affect all its contents, but it seems not to be at all, and I've tried a few other height settings with no luck.

    http://ctrlshiftweb.com/test/HoE/test.html

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You only get one shot at min-height:100%; and that is on a direct child of the body,html elements which have their height set to 100%.

    You can't get min-height:100% on the nested child (which is your #container div) of your #background div.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if i set the background div to min-height 100% though it doesn't have any effect. it is impossible to do a sticky footer with that number of nested divs?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ray said you can only have one element that stretches from top to bottom because and that is the element called #container in your page.

    It has a min-height: of 100% which it gets from the height:100% set on html and body.

    You cannot nest anymore elements inside #container and give them min-height:100% because you can only base min-height on a parent that has a real height set (e.g height:100%). You can't base it on a parent that has only min-height because the child then collapses to height:auto.

    You can't set #container as height:100% either because then it will never grow. It's a catch 22 situation.

    What you need to do is be creative and try to do everything on that first element with some sort of composite image if you are trying to make equal columns and borders.

    At present you have completely wasted the 100% height effect of #container by applying an image to it that could have been placed in a normal nested div such as your header.

    Use #container for the full height background that you wanted.

    I'd need to see a picture of what you are trying to do to let you know if its possible or not.

    If you are creative you can often achieve these things.

    http://www.pmob.co.uk/temp/sticky-footer-2col.htm
    http://www.pmob.co.uk/temp/100-with-rightbar.htm


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
  •