Fixed position footer at 100% width extends past window to right

Question

I need help with trying to get this footer set in a fixed position. I'm learning as I go and trying to make a reasonably liquid layout. It's a work-in-progress but I can't continue until I get the footer in the right place.

My problem is it keeps extending past the window to the right. Sometimes it creates a scrollbar and does not follow margin rules. I've tried just about everything I could think of and what I could find by using trusty google. I have used the latest chrome and firefox versions to see if it was a chrome issue.

I once had a wrap container, but I have removed it and moved the footer code from place to place trying to find a place for it where it would behave properly.



body {
    text-align: center;
    margin-top: 0;
    background-color: #1A1A1A;
    background-image: url('#');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;}

    #logo {
    background-color: rgba(53, 53, 53, 0.9);
    padding: 10px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    height: 90px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -ms-border-bottom-left-radius: 5px;
    -ms-border-bottom-right-radius: 5px;
    -o-border-bottom-left-radius: 5px;
    -o-border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;}
    
    #nav {
    background-color: rgba(53, 53, 53, 0.9);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -msborder-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    padding: 0px;
    position: relative;
    margin-right: 0;
    margin-left: 0;}

    ul {
    list-style: none;
    margin: 0;
    display: inline-block;
    position: relative;}

    li {
    display: inline-block;
    position: relative;}

    a {
    display: inline-block;
    text-decoration: none;
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;}

    #link1:hover {
    background-color: #727272;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}

    #link1:active {
    background-color: #ba6a15;}

    #link2:hover {
    background-color: #727272;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}

    #link2:active {
    background-color: #ba6a15;}

    #link3:hover {
    background-color: #727272;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}

    #link3:active {
    background-color: #ba6a15;}

    #link4:hover {
    background-color: #727272;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}

    #link4:active {
    background-color: #ba6a15;}

    #footer {
    background-color: rgba(53, 53, 53, 0.9);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 22px;
    padding: 3px;
    color: #FFF;}
<!DOCTYPE html>
    <html>
    <head>
    </head>

    <body>    
    <header>
            <div id="logo"><img src="#" alt="logo"></div>
    <nav>
    <ul>
            <li id="link1"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>

            <li id="link2"><a href="#"><img src="#"  alt=""; height="100"; width="100"></a></li>

            <li id="link3"><a href="#"><img src="#"  alt=""; height="100"; width="100"></a></li>

            <li id="link4"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>
    </ul>
    </nav>
    </header>
    <footer>Hello there!</footer>
    </body>

add css `html,body{ margin:0px; padding:0px; }` – Sunand Sep 22 '14 at 22:48 — Sunand, Sep 22 '14 at 22:48

Anonymous · Accepted Answer · 2014-09-22T23:05:46.943

4

You could do it by set margin:0px; to body and box-sizing: border-box; to footer

JSFiddle - DEMO

body {
    text-align: center;
    background-color: #1A1A1A;
    background-image: url('#');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin:0px;
}
#footer {
    background-color: rgba(53, 53, 53, 0.9);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 22px;
    padding: 3px;
    color: #FFF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

edited Sep 22 '14 at 23:05

answered Sep 22 '14 at 22:50

Anonymous

10,002
3
23
39

Oh, thanks. I know that particular fix isn't cross-compatible with some browsers. Would that be an issue and if so, what alternate code could I use? – srob Sep 22 '14 at 22:59
@srob I've updated my answer with browser prefix and check it out - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – Anonymous Sep 22 '14 at 23:07
@srob you could use `max-width: 100%;` – Johan Karlsson Sep 22 '14 at 23:10
Oh, so the webkits work with many things then and thanks, @caeth for the alternate suggestion. :) – srob Sep 22 '14 at 23:12

score 1 · Answer 2 · answered Sep 22 '14 at 22:54

1

Here's whats wrong:

#footer {
   width: 100%;
   padding: 3px;
}

Your footer width is set to 100% + 6px from padding.

Try adding this to make padding (and border) part of footer content:

#footer{
   box-sizing: border-box;
}

answered Sep 22 '14 at 22:54

Johan Karlsson

6,419
1
19
28

score 0 · Answer 3 · answered Sep 22 '14 at 22:50

0

try this:

<div id="footer">Hello there!</div>

answered Sep 22 '14 at 22:50

FMoosavi

150
1
11

Fixed position footer at 100% width extends past window to right

3 Answers3

Linked