Position fixed with margin and width 100% error - html

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.