iqueqiorio iqueqiorio - 3 months ago 19
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

Can be seen in fiddle here

setting the
works on the leftside but then, the button is
short on the right side.

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



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.