iqueqiorio iqueqiorio - 2 months ago 16
CSS Question

Ignore parent padding with variable width

I have a button inside a div which is inside a div and I am trying to have the button in and inner div ignore the parent divs padding here is my code

<div style="padding:10px; background:red;">
<div style="width:100%; margin:-10px;">

<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>


Can be seen in fiddle here https://jsfiddle.net/5sc5y4z3/.

setting the
margin:-10px
works on the leftside but then, the button is
20px
short on the right side.

How can I extend it so it fills the whole width of the parent div?

Thanks

Answer

100% width doesn't include the negative margins. You need to add it back:

<div style="width:calc(100%+20px); margin:-10px;">

CSS calc() is supported in all modern browsers since IE9, so it's safe to use in most web development projects.