Five (20%) equal divs with 20px margin-right on one row?

Question

How do I get 5 (20% equal) floating divs on one row with 20px margin-right between in each except the last-child?

Structure:

<div class="f-item pull-left">1</div>
<div class="f-item pull-left">2</div>
<div class="f-item pull-left">3</div>
<div class="f-item pull-left">4</div>
<div class="f-item pull-left">5</div>

Tried with the following, which breaks the row (and "reset" on last-child seems to be ignored):

.f-item {
    margin-right: 20px;
    width: 20%;

    &:last-child {
        margin-right: 0;
    }
}

Fiddle with example.

.f-group {
  width: 100%;
}

.f-item {
  margin-right: 20px;
  width: 20%;
  background-color: green;
  text-align: center;
  color: white;
}

.f-item:last-child {
  margin-right: 0;
}

.col-sm-12 {
  background-color: red;
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" rel="stylesheet"/>
<div class="col-sm-12">
  <div class="f-group">
    <div class="f-item pull-left">
      1
    </div>
    <div class="f-item pull-left">
      2
    </div>
    <div class="f-item pull-left">
      3
    </div>
    <div class="f-item pull-left">
      4
    </div>
    <div class="f-item pull-left">
      5
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="col-sm-12">

Possible duplicate of [Five equal columns in twitter bootstrap](http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap) — Robert McKee, May 15 '17 at 14:09
It's funny, if you have five 20% divs on one row then there can't be margins or else it would not be 20% right? lol I know what you mean though but i thought this is funny. You could have 5 divs of 20% and have padding on the inside or you can use flex, many ways to do this — Huangism, May 15 '17 at 14:44

Carol Skelly · Accepted Answer · 2017-05-15T15:27:15.037

1

You need to adjust the item width to allow for the margin width...

.f-item {
    width: calc(20% - 16px);
    margin-right: 20px;
    background-color: green;
    text-align: center;
    color: white;

    &:last-child {
        margin-right: 0;
    }
}

https://jsfiddle.net/7e1pdttt/1/

CSS only:

.f-item {
    width: calc(20% - 16px);
    margin-right: 20px;
    background-color: green;
    text-align: center;
    color: white;
}
.f-item:last-child {
    margin-right: 0;
 }

http://www.bootply.com/jxKTTBZsSi

edited May 15 '17 at 15:27

answered May 15 '17 at 14:06

Carol Skelly

351,302
90
710
624

cheers, was testing calc() as you commented and ran into the same "issue" I see in your fiddle. How to take account for removing margin-right on the last item and still have equal divs? – user1231561 May 15 '17 at 14:09
Its in the math. Updated my answer. Add 4 more pixels on each item to adjust for the missing margin-right on the last child (4*4=16). Also took away `clearfix` so that the last-child selector works. – Carol Skelly May 15 '17 at 14:17
1

For starting users, it might be useful to include the compiled CSS. – Bram Vanroy May 15 '17 at 14:38
Updated my answer with CSS – Carol Skelly May 15 '17 at 15:28

score 1 · Answer 2 · answered May 15 '17 at 14:38

Consider flexbox:

.f-items {
  display: flex;
  justify-content: space-between;
}

.f-item {
  margin-right: 20px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  background: #eee;
}

.f-item:last-child {
  margin-right: 0;
}

<div class="f-items">
  <div class="f-item pull-left">1</div>
  <div class="f-item pull-left">2</div>
  <div class="f-item pull-left">3</div>
  <div class="f-item pull-left">4</div>
  <div class="f-item pull-left">5</div>
</div>

Five (20%) equal divs with 20px margin-right on one row?

2 Answers2