iqueqiorio iqueqiorio - 1 year ago 105
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?


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download