Position fixed with margin and width 100% error

Question

I have a simple div with width:100%and position:fixed to bottom. This is my CSS:

#footer {
     width: 100%;
     border: 1px solid #000000;
     position:fixed;
     bottom: 0;
     margin:0 5px;
}

When I apply margin left and right using the shorthand property, the footer is being pushed to the right which is very strange.

I created a fiddle for you to play with: Fiddle Demo

Answer 1

You could use calc():

jsFiddle example

#footer {
    width: calc(100% - 12px);
    border: 1px solid #000000;
    position:fixed;
    margin:0 5px;
}
body {
    margin:0;
    padding:0;
}

The 12px in the calc comes from the 5px of each margin, plus the 1px for the left and right border.

Or option #2 (no width or calc() needed). Simply set the left and right to 5px and the footer will stretch the full width, minus those amounts:

#footer {
    border: 1px solid #000000;
    position:fixed;
    left:5px;
    right:5px;
}
body {
    margin:0;
    padding:0;
}

jsFiddle example

Answer 2

I would do two things:

• Set box-sizing: border-box. This will ensure paddings dont affect the outer width of your element.

• Set margin and padding to 0 for html and body elements as these have applied a margin by default in most browsers.

You can now set the element padding instead of trying a workaround with the margin values.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
#footer {
    width: 100%;
    border: 1px solid #000000;
    position:fixed;
    padding:0 5px;
}

Can be tested in this JSFiddle

Answer 3

You could use bottom: 0; In my code below I also used padding rather than margin, padding will affect the 'margins' within the div where as margin refers to the outside.

#footer { width: 100%; border: 1px solid #000000; position: fixed; margin: 0px; bottom: 0px; padding: 0px 5px; }

http://jsfiddle.net/3w6xE/3/

Answer 4

As an alternative to using calc(), (which I think is a good solution, despite the limited browser support), you could wrap the element:

<div class="footer_wrapper">
    <div class="footer">test</div>
</div>

The parent, wrapper element is fixed with a width of 100%, and the child .footer element has the margin. As others have mentioned, use box-sizing:border-box in order to include the border in the element's width calculations. Support for box-sizing can be seen here.

Example Here

.footer_wrapper {
    width: 100%;
    position:fixed;
}
.footer_wrapper > .footer {
    border:1px solid #000;
    margin:0 5px;
    box-sizing:border-box;
}

As an alternative to using a margin, you could also just add left:5px/right:5px.

---

If you want the reason behind why your example was behaving as it was, it's simply because a fixed element's position is relative to the viewport. The element therefore has a width of 100%, of the window thus explaining why the margin wasn't behaving as expected. Usage of calc() allows you to subtract the margin from the width.