How to make div 100% width when parent tag has padding?
If you give the footer a left and right margin that is a negative amount, of equal size to the padding of the body, then it will counter the body's padding.
body {
padding-left:10px;
padding-right:10px;
}
.footer {
margin-left:-10px;
margin-right:-10px;
}
Another alternative way can be this : using calc
<div class="parent"> <!--/ Parent div with padding left right -->
<div class="child">i'm Child div</div>
</body>
CSS
.parent{
padding:0 20px;
}
.child{
width:-moz-calc(100% - 40px); <!--/ similar with other browser prefixes -->
width:calc(100% - 40px);
}
You could apply a negative margin to the inside container to negate the padding
<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px"> </div>
</body>