Creating margin in full width footer - html

Question

I am creating a full width footer with margin, but it seems like when I add the margin it overflows. How can i avoid this?
Fiddle
footer {
bottom: 0;
position: absolute;
margin 40px;
width: 100%;
font-size: 2em;
}
footer .left_div {
float: left;
}
footer .right_div {
float: right;
}
<footer>
<div class="left_div">This is a long test</div>
<div class="right_div">This is another text</div>
</footer>

Answer 1

That's because you're specifying a width of 100% so when you add the margins then it becomes 100% + 40px on each side making it 80px wider that the window.
There's a few ways to fix it, you can use calc for the width so subtract the extra margin on the sides:
footer {
bottom: 0;
position: absolute;
margin: 40px;
width: calc(100% - 80px); /* 40px on each side = 80px */
font-size: 2em;
}
Or even easier remove the width property and add left and right properties to stretch the element without directly messing with the size:
footer {
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 40px;
font-size: 2em;
}

Answer 2

You're missing : in your css declaration. And yes, this is fatal.
margin 40px;
be
margin: 40px;
Your footer is positioned at a specified position relative to its closest positioned ancestor or to the containing block. As MDN says about Absolute Position. And your there's no relative closest parents to it. Which in your case, in the fiddle, width: 100% will take the width of iframe which is 700px.
But, you can have the workaround like this,
footer {
font-size: 2em;
margin: 40px;
bottom:0;
left: 0;
position: absolute;
right: 0;
}
Here's the updated fiddle

Answer 3

from my experience the best way is remove width: 100% and use left: 0; right: 0;
footer {
position:absolute;
left:0;
right:0;
bottom:0;
margin: 40px;
font-size: 2em;
}
footer .left_div {
float: left;
}
footer .right_div {
float: right;
}
<footer>
<div class="left_div">This is a long test</div>
<div class="right_div">This is another text</div>
</footer>

Answer 4

Reset default margin in body and add box-sizing:border-box to footer,
because you are applying margin and using position:absolute you need to use calc()
plus, you have a typo on margin 40px, should be margin:40px
body {
margin: 0
}
footer {
bottom: 0;
position: absolute;
margin: 40px;
width: calc(100% - 80px);
font-size: 2em;
box-sizing: border-box;
background: red
}
footer .left_div {
float: left;
}
footer .right_div {
float: right;
}
<footer>
<div class="left_div">This is a long test</div>
<div class="right_div">This is another text</div>
</footer>

Answer 5

add
left:0; to the footer css :)

Answer 6

It will overflow as margin increases the space from outside the div or block. If you want to hide the overflow then use overflow: hidden.
If you want to show all the data with margin then you should reduce width and then apply margin.
It is not worth to apply margin on div/block instead use padding. Padding increases from inside.