CODEWITHSUNDEEP
javascripthtmlcss
iqueqiorio
iqueqiorio

Reputation: 1187

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

Upvotes: 0

Views: 1012

Answers (3)

Sam5487
Sam5487

Reputation: 679

It's getting clipped, so you could also use the following to mask the right side:

HTML

<div style="overflow: hidden; margin:-10px;">

Upvotes: 0

JC Hern&#225;ndez
JC Hern&#225;ndez

Reputation: 807

Use this instead:

HTML:

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

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

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

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.

Upvotes: 9

Related Questions