Menu
I have an HTML page where the body tag has CSS padding-left and padding-right applied. I'd like the page footer div to be 100% width of the page though, without the body padding applied. Is there a good/easy way of doing this ?
397
No, element width does not include padding, margin, or border. The basic difference between padding and width is that in padding you define the space around the element and on the other hand in the width you define the space of the element.
Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
The content-box model states that padding and borders don't count in the width that you set for a box. So they add on to its width .
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>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
