Percentage % padding that isn't relative to the parent

Question

I have this piece of HTML

<div class="box">
   <div class="box-header">
     <h4 class="box-header-title">CONTENT</h4>
   </div>
   <!-- rest of box -->
</div>

And I have this CSS:

.box {
  display: inline-block;
  min-width: 360px;
  position: relative;
}
.box-header {
  color: #fff;
}
.box-header-title {
  padding: 0 2%;
}

What I want: That the .box.header-title adjust it's padding according to the current width of .box-header-title instead of .box

Right now, if .box is 500px computed value, the padding will be computed at 10px. I want it to be computed at the current width of the element, instead of the parent box.

score 2 · Accepted Answer · answered Jul 01 '13 at 11:26

2

According to the CSS specification, percentage values for padding are computed based on the element's containing block (parent element). So what you are seeing is the expected behavior.

Reference: http://www.w3.org/TR/CSS2/box.html#padding-properties

To get the result that you want, you would need to use some JavaScript or jQuery method to compute the desired value.

answered Jul 01 '13 at 11:26

Marc Audet

46,011
11
63
83

I can provide a jQuery solution later when I return to my desk. – Marc Audet Jul 01 '13 at 11:27
hmm I see, so I need to apply the width manually on a parent wrapper so that the inner padding is correct, right? – pocesar Jul 01 '13 at 13:04
Because you define `.box` to be inline-block, the width of `.box` will be computed as shrink-to-fit. So the CSS parser cannot determine what the padding % will compute to unless you specify a fixed value for the width of `.box`. – Marc Audet Jul 01 '13 at 13:34

score 0 · Answer 2 · answered Jul 01 '13 at 11:02

0

Why dont you try,

position:absolute;

and give, appropriate, top and left values.

answered Jul 01 '13 at 11:02

nmkyuppie

1,456
1
14
30

Percentage % padding that isn't relative to the parent

2 Answers2