CODEWITHSUNDEEP
htmlcss
LunaLuna
LunaLuna

Reputation: 61

Automatical padding between divs - NO bootstrap

So I have a question about css. Is it possible to get this design without using padding on the "5 divs element"?

I cannot hardcode values in the style-tag in each div because it's going to be used in a foreach loop (but the width is going to be the same - 5 divs in each row) I don't want to use pseudo((::after a certain div)) because I don't know how many divs there going to be in total.

If I'm using: width: calc(100% / 5 - *number of padding* px)

and then using padding: *number of padding* px;

on the 5 divs my outer divs is not on the right place (not on the line like they are supposed to be).

Any idea how I can get this in the best way [NO bootstrap]?

padding

Upvotes: 0

Views: 63

Answers (3)

Temani Afif
Temani Afif

Reputation: 273649

You should first remove the padding from 100% then divide by 5. In your case, you will have 4 padding between your element so the formula should be:

 calc((100% - 4*padding)/5);

Example:

.container {
  display: flex;
  height: 80px;
  justify-content:space-between;
  border:1px solid;
}

.container>div {
  width: calc((100% - 4*10px)/5);
  background: red;
  margin:10px 0;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Upvotes: 0

rpm192
rpm192

Reputation: 2464

You should use flexbox. Use justify-content: space-between to get the result you want.

You can increase the padding between the divs by decreasing the width.

.parent {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.child {
  width: 19%;
  background-color: gray;
  height: 100px;
}

.container {
  border: 3px solid black;
  padding: 10px 0px 10px 0px;
}
<div class="container">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Upvotes: 2

blake nguyen
blake nguyen

Reputation: 64

You can use flexbox in CSS3 (Guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Upvotes: 1

Related Questions