Include padding/margin in width percentage?

Question

How can I have width:50% with panel-default, but including padding or margin (not sure which one is more appropriate) in the calculation, so that the panel-default perfectly fills 100% of the width?

Code

.testing-here {
  padding: 2.5px;
  display: inline;
  box-sizing: border-box;
}
body {
  box-sizing: border-box;
}
.panel-default {
  box-sizing: border-box;
  border-style: none;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  /* = width for a 1:1 aspect ratio */
  overflow: hidden;
  background-color: #446CB3;
  border-radius: 0px;
  display: inline-block;
}
.panel-body {
  color: white;
  position: absolute;
}

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

UPDATE:

Right now if I set the width to 50% all the panels dropdown vertically because they can't fit side by side.

Possible duplicate of [Including margin for width and height](http://stackoverflow.com/questions/14416651/including-margin-for-width-and-height) — , May 17 '16 at 18:01

dippas · Accepted Answer · 2016-05-17T18:21:06.457

you need to :

add box-sizing:border-box to the *,*:before,*:after
fix inline-block gap , you can do that by reset parents font, font-size:0
remove display:inline from .testing-here
add border to .panel-default

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.testing-here {
  padding: 2.5px;
  font-size: 0
}
.panel-default {
  box-sizing: border-box;
  border-style: none;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  /* = width for a 1:1 aspect ratio */
  overflow: hidden;
  background-color: #446CB3;
  border-radius: 0;
  display: inline-block;
  font-size: 16px;
  border: 5px white solid
}
.panel-body {
  color: white;
  position: absolute;
}

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

I had updated question. I added `font-size: 0` to both parent div from your answer, but problem persists where panels are dropping down into vertical column — AnthonyGalli.com, May 17 '16 at 18:18
Figured it out :) I had `testing-here` over each panel. You put it over all the panels. Thanks for the help! — AnthonyGalli.com, May 17 '16 at 18:45

score 2 · Answer 2 · answered May 17 '16 at 17:56

2

add box-sizing: border-box; to the element

answered May 17 '16 at 17:56

Johannes

64,305
18
73
130

1

... or the entire document. It helps maintain sanity. – isherwood May 17 '16 at 17:56
Thanks @Johannes! But when I put that in `body { }` and then make `width: 50%` the panels don't fit in the row anymore and turns into one column. – AnthonyGalli.com May 17 '16 at 18:05
I didn't do that, but you know why my problem is persisting? I updated question with new code – AnthonyGalli.com May 17 '16 at 18:10
obviously what you posted isn't your complete code, so it's hard to tell – Johannes May 17 '16 at 18:22

Include padding/margin in width percentage?

2 Answers2