Position absolute and margin: auto

Question

I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.

html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
        <link rel="shortcut icon" href="../IMAGES/favicon.ico">
        <title>TEST</title>
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="../css/stylesheet.css">
    </head>
    <body>
        <div id="header">
            <div id="logo">
                <img src="../IMAGES/logo.png" />
            </div>
            <div id="logotitel">
                Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
            </div>
        </div>
        <div id="nav">
            <div id="links">
                <a href="index.php"><div class="link">Home</div></a>
                <a href="wie.php"><div class="link">Wie is wie</div></a>
                <a href="fotos.php"><div class="link">Foto's</div></a>
                <a href="repertoire.php"><div class="link">Repertoire</div></a>
                <a href="links.php"><div class="link">Links</div></a>
                <a href="contact.php"><div class="link">Contact</div></a>
            </div>
        </div>
        <div class="clear"></div>
        <div id="content">
            TEST
        </div>
        <div class="clear"></div>
        <div id="footer">
            <div id="copy">
                Developed by Yoshi &copy vAntstAd
           </div>
       </div>
   </body>
</html>

CSS:

/* PAGE LAYOUT */
html
{
        padding: 0px;
        margin: 0px;
}

body
{
        background-image: url(../IMAGES/background.png);
        padding: 0px;
        margin: 0px;
        color: white;
        font-family: 'Source Sans Pro', serif, sans-serif;
}

.clear
{
        clear: both;
}

/* HEADER */
#header
{
        width: 1100px;
        height: 150px;
        background-color: #282828;
        margin: auto;
        border-bottom: solid;
        border-color: red;
}

#logo
{
        width: 283px;
        height: 100px;
        margin: auto;
}

#logotitel
{
        width: 1100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: x-large;
}

/* NAV */
#nav
{
        width: 1100px;
        height: 50px;
        margin-top: 25px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 25px;
        background-color: red;
}

#links
{
        width: 600px;
        height: 50px;
        margin: auto;
}

.link
{
        width: 100px;
        height: 50px;
        line-height: 50px;
        float: left;
        text-align: center;
        color: white;
        text-decoration: none;
}

.link:hover
{
        color: #282828;
        text-decoration: underline;
}

/* CONTENT */

#content
{
        width: 1100px;
        height: auto;
        margin: auto;
        color: #282828;
        position: relative;
}

/* FOOTER */

#footer
{
        width: 1100PX;
        height: 50px;
        position: absolute;
        bottom: 0;
        margin: auto;
        background-color: #282828;
}

#copy
{
        width: auto;
        float: right;
        margin-right: 5px;
        height: 50px;
        line-height: 50px;
}

Your question has quite a bit of code. For better help sooner, post a [SSCCE (link)](http://sscce.org). — tckmn, Apr 12 '13 at 00:44
anwnser can be found here: http://stackoverflow.com/questions/9998260/css-absolute-position-wont-work-with-margin-leftauto-margin-right-auto — This_is_me, Apr 12 '13 at 00:44
Possible duplicate: http://stackoverflow.com/questions/9350775/set-position-absolute-and-margin — showdev, Apr 12 '13 at 00:44

Jace · Accepted Answer · 2013-04-12T01:12:19.553

13

Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.

Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/

Therefore, footer would become:

#footer
{
    width: 1100PX;
    height: 50px;
    position: absolute;
    bottom: 0;
    left:50%;           /* Add this */
    margin-left:-550px; /* Add this (this is half of #footers width) */
    background-color: #282828;
}

If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute

edited Apr 12 '13 at 01:12

answered Apr 12 '13 at 00:44

Jace

3,052
2
22
33

But it doesn't work when the page is longer than the screen, it stays on that position it ?rendered? first. It doesn't stay on the bottom when I'm scrolling :( – Yoshi Peters Apr 12 '13 at 01:10
@YoshiPeters use `position:fixed` instead of `absolute`. updated answer – Jace Apr 12 '13 at 01:11
2

Good thing CSS has saved us from writing bad HTML and confusing layout rules! – Yuck Jan 13 '14 at 17:18

score 3 · Answer 2 · answered Oct 16 '15 at 09:40

To have a footer at the bottom, centered horizontally, you can apply the following CSS:

footer{
    width: 100%;
    max-width: 600px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.

See this Fiddle for an example

Position absolute and margin: auto

2 Answers2

Linked