css margin bottom??

Discussion in 'CSS' started by yllib89, Mar 30, 2008.

0
  1. #1
    hello, I am trying to get my footer cell to be at the bottom of the browser. can someone help?

    html, body{
    background-image: url(img/bg.jpg);
    margin:0;
    padding:0;
    text-align:center;
    }


    I tried to put margin-bottom: 0;

    in the above code and it did not work maybe i am doing something wrong?

    thanks
     
    yllib89, Mar 30, 2008 IP
  2. yllib89

    yllib89 Banned

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    anyone have an idea?
     
    yllib89, Mar 30, 2008 IP
  3. yllib89

    yllib89 Banned

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    img180.imageshack.us/my.php?image=61555961at0.jpg



    here is an image of what i am talking about.
     
    yllib89, Mar 30, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You're minunderstanding margins.

    An HTML document reads from top to bottom, left to right (unless stated otherwise, for Hebrew for instance). All the elements try to hug the top and left corner, unless pushed down by something else (another element, or a margin, or whatever).


    What you are asking for is a 100% height model. The page has to be seen as always at least 100% high for the footer to know where the bottom of someone's screen is. It's a bit complicated. First look at Deathshadow's example for 100% height:
    http://forums.digitalpoint.com/showthread.php?t=620374

    He uses Paul O'B's method of keeping the footer at either the bottom of the page (when content is really short like in your img), OR at the bottom of the page (meaning there's enough content that people need to scroll down to see the bottom of the page).

    The main thing is that #footer is not inside the #container (which is wrapping the rest of the page and has 100% height). This means the footer's really sitting "on top of" the 100% height page. Two things to keep in mind if you do this:
    100% height really means 100% height in all modern browsers (IE is not a modern browser, though in this case IE7 comes close enough), so you can't add any top or bottom margins or padding (well, you can, but it's not a good idea). We usually get around this by telling IE6 that height is 100% (cause IE6 will let height grow to accomodate content) and all the other browsers, min-height: 100%; so they can grow too.
    Second thing is that the footer must have a fixed height. Without a height, we can't accurately pull the footer up over the top of #container's bottom (cause we don't know how much to pull it up by). Also, you don't want content to end up behind the footer so there's some bottom padding on an inner container to hold off the footer.

    You can also have a look at one of Gary's pages:
    http://gtwebdev.com/workshop/layout/footer-bottom.php

    The footer is a bit hard to see, it's the text that says creative commons and the Up to header link.

    If you meant a fixed footer, you'll need to do the above for IE6 and below and position: fixed; bottom: 0; for the other browsers. The footer must still be a direct child of a 100% high body, and IE6 doesn't understand fixed so it'll imitate the above "footer always at the bottom" technique instead... or you'll have to use Javascript to imitate position: fixed for IE6 and below.
     
    Stomme poes, Mar 31, 2008 IP