-1

I have a div with 100% width and some padding. The div is larger than it's wrapper. Obviously I don't want that to happen. I can not work with pixels on the width as the width is dynamic.

I've tried out various CSS tricks and searched through stackoverflow. I can not imagine how nobody asked about this probably simple problem yet, but I really found nothing that works so far. That said, please excuse me if this might still be a duplicate question.

.entryrow {
 position:relative;
 width:100%;
 height:100px;
 background: linear-gradient(#2c647b,#191654);
 box-sizing:border-box;
 display: inline-block;
 padding:5px;
 margin:5px 5px 0 5px;
 border:1px solid #ccc;
 cursor:pointer;
}
<div style="width:100%;background:black;height:120px;">
  <div class="entryrow">
    Blubb
  </div>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
Chris S.
  • 1,199
  • 11
  • 25

5 Answers5

2

Use calc(100% - 10px); for width (= 100% minus 2 x 5px margins) (borders don't count since you use box-sizing: border-box)

.entryrow {
 position:relative;
 width:calc(100% - 10px);
 height:100px;
 background: linear-gradient(#2c647b,#191654);
 box-sizing:border-box;
 display: inline-block;
 padding:5px;
 margin:5px 5px 0 5px;
 border:1px solid #ccc;
 cursor:pointer;
}
<div style="width:100%;background:black;height:120px;">
  <div class="entryrow">
    Blubb
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Johannes
  • 64,305
  • 18
  • 73
  • 130
1

Try the calc() function of css on your .entryrow.

.entryrow {
 position:relative;
 width:calc(100% - 10px); /* 10px for the margin applied below */
 height:100px;
 background: linear-gradient(#2c647b,#191654);
 box-sizing:border-box;
 display: inline-block;
 padding:5px;
 margin:5px 5px 0 5px;
 border:1px solid #ccc;
 cursor:pointer;
}
<div style="width:100%;background:black;height:400px;">
  <div class="entryrow">
    Blubb
  </div>
</div>
Thomas Scheffer
  • 524
  • 4
  • 7
1

Simply keep the element a block element and you won't need width:100% or box-sizing:border-box (by the way it's good to keep it to avoid any future issue related to padding/border combined with width)

.entryrow {
  position: relative;
  height: 100px;
  background: linear-gradient(#2c647b, #191654);
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}
<div style="background:black;overflow:hidden">
  <div class="entryrow">
    Blubb
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks, there are many helpful responses and I've learned new about the calc function but this solution seems more clean so I've accepted this one as the most helpful. – Chris S. Aug 20 '18 at 10:35
1

Sometimes, less code, is more ;)

EDIT: To demonstrate that creating multiple rows with this solution, would result the expected result by the OP, most of the other answers would still have aligning issues.

For example, the accepted answer (https://stackoverflow.com/a/51928740/572771) if you add more than one row, it will cut off the top and bottom of the rows.

.wrapper {
  background:black;
  padding: 1%
}
.entryrow {
  height:100px;
  background: linear-gradient(#2c647b,#191654);
  border:1px solid #ccc;
  padding: 1%;
  margin-bottom: 1%;
}
<div class="wrapper">
  <div class="entryrow">
    Blubb1
  </div>
  <div class="entryrow">
    Blubb1
  </div>
</div>
Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93
  • Thanks, but would you kindly explain why exactly you changed the padding to percentage? – Chris S. Aug 20 '18 at 10:34
  • `I can not work with pixels on the width as the width is dynamic.` so i figured to make it as dynamic as possible. It should work if you change them back to pixels. – Rafael Herscovici Aug 20 '18 at 10:42
  • the accepted solution asnwer the question and the specific issue ;) it's not about alignement or adding more rows, it's about width and margin/padding issue. If we want more row we simply remove the fixed height. No need to add comment about other answers ;) simply describe what you answer is doing – Temani Afif Aug 20 '18 at 10:54
  • I did explain what my solution is doing and gave an example why another answer would not work. You are taking things personally, while i could have gave an example of any other answer, i just offered a solution for other visitors that will visit this page. – Rafael Herscovici Aug 20 '18 at 10:58
  • @TemaniAfif Now that you edited your answer and removed the fixed height, yes, it would result the same as my answer. – Rafael Herscovici Aug 20 '18 at 11:03
  • not the same, you are using % values which is not accurate .. resize the browser and see the effect, it's not a good idea to have margin/padding like this, you will have different rendring across devices – Temani Afif Aug 20 '18 at 11:08
  • Its called `RESPONSIVE`, anyway, im out of this conversation. – Rafael Herscovici Aug 20 '18 at 11:40
-1

If you give a max-width: 100px; to your wrapping div and max-width: 90px; to your .entyrow it is working perfectly. Obviously, you just say to the divs width: 100%; but if both of them 100% you don't have space for the padding. It's up to you what px you put in the max-width. Hope it helped.

Regina
  • 21
  • 5
  • I am not exactly sure why people who want to help get instant minus reputation. Thank you for trying to help me. However I found @TemaniAfif 's response the most helpful tbh. – Chris S. Aug 20 '18 at 10:37