css footer and absolute question

Discussion in 'Web Design and Development' started by andyjamesnelson, Oct 1, 2008.

  1. andyjamesnelson macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #1
    Hey I found this footer tip:

    the html

    <div id="container">
    <div id="content"></div>
    <div id="footer"></div>
    </div>

    the css

    *, body {margin: 0; padding: 0;}
    #container {display: block; position: absolute; min-height: 100%;}
    #content {display: block; margin-bottom: 3em;}
    #footer {position: absolute; display: block; bottom: 0; height: 3em }

    All works fine... I add a background, color and height to the footer and content so I could see them and the whole thing is sat flush left.

    Now is there a way to get over the absolute attribute canceling out margin:0 auto so that the page still centers?

    Also I really don't get what absolute means without any coordinates i.e top:100px etc?

    Would poistion:relative mean anything on its own? Nothing I've read about css suggests just using these attributes on their own?

    Andy
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You might be able to do margin: 0 auto; rather than just 0. Worth a shot. I'd have to put together a test page to try things out.

    Absolute positioning without specific placement means it will stay where it lands, as the page is rendered that is. Using absolute positioning removes the content from the page flow so it won't influence other elements and those other elements won't influence it. The #container doesn't have coordinates because it's likely the first element in the body tag so it will naturally land at top:0 and left: 0.

    Relative positioning would be the same thing except the element is not removed from page flow. Using relative on its own is fairly common for me as it's generally what you do with the elements inside that relative element that matters, because the inner elements can be placed relative to that parent. At least that's how I use it generally. CSS is flexible like that.

    Hope that clears it up a little.
     
  3. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #3
    Ok i get the use of absolute alone thanks for as for not being able to center the page I didn't understand what you meant? I am trying margin 0 auto;?

    That doesn't work because of the absolute that seems to be needed for the footer at the bottom to work...

    Andy
     
  4. darronz macrumors newbie

    Joined:
    Oct 1, 2008
    #4
    All you should need to do is change the #container to be position:relative; and add margin: 0 auto;

    The position attribute describes the html elements position relative to its parent.

    There is a good tutorial here:
    http://www.w3schools.com/Css/pr_class_position.asp

    The final code would look like this:
    <html>
    <head>
    <style>
    *, body {margin: 0; padding: 0;}
    #container {display: block; position: relative; min-height: 100%;margin: 0 auto;}
    #content {display: block; margin-bottom: 3em;}
    #footer {position: absolute; display: block; bottom: 0; height: 3em }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="content">Some content here</div>
    <div id="footer">The footer here</div>
    </div>
    </body>
    </html>
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I toyed with a test page and got it to center (only tested in Firefox and Safari so naturally it will break in IE). I made bold the key things I changed. I have some background colors added so things can be seen and the width on container can be set to whatever you want. See what you think of the results. Again, I haven't tested this very much.

    Code:
    *, body {
     margin: 0; padding: 0;
    }
    #container {
     position: absolute;
     [B]left: .01%; right: .01%;[/B]
     [B]margin: 0 auto;[/B]
     min-height: 100%; [B]width: 47em;[/B]
     background: #ff0;
    }
    #content {
     margin-bottom: 3em;
     background: #0f0;
     [B]width: 100%;[/B]
    }
    #footer {
     position: absolute;
     bottom: 0;
     height: 3em; [B]width: 100%;[/B]
     background: #f00;
    }
     
  6. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #6
    Hey, no if you do that the footer stops being at the bottom.

    Sorry I should have explained clearer what the code was doing!

    the html

    <div id="container">
    <div id="content"></div>
    <div id="footer"></div>
    </div>

    the css

    *, body {margin: 0; padding: 0;}
    #container {display: block; position: absolute; min-height: 100%;}
    #content {display: block; margin-bottom: 3em;}
    #footer {position: absolute; display: block; bottom: 0; height: 3em }

    This is a way of making a footer stick at the bottom of the page and not overlap the content.

    What I am trying to work out is how to use this and still center the page?

    Sorry for not being totally clear.

    Andy
     
  7. a.luiz.n macrumors newbie

    Joined:
    Oct 25, 2008
    #7
    hey! last friday i was breaking my head to make a footer with absolute positioning...and i couldnt..
    i didnt test this solution at my job's site yet... but i think it can help me, thanks a lot!


    i think i can help you in return!
    i learned that to centralize an absolute-positionated div we can do this in css of it:

    #container {
    width: 988px;
    margin-left: 50%;
    left: -494px;
    }

    where 494 is the half of the div's width.
    hope i could help...now let me pay attention to my php course =D
     

Share This Page