CODEWITHSUNDEEP
htmlcsspositionmargin
Yoshi Peters
Yoshi Peters

Reputation: 196

Position absolute and margin: auto

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;
}

Upvotes: 8

Views: 27204

Answers (2)

Gust van de Wal
Gust van de Wal

Reputation: 5291

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

Upvotes: 3

Jace
Jace

Reputation: 3072

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

Upvotes: 13

Related Questions