3 elements with 33.33% width exceed 100%?

Question

I have a div with 3 elements (h2's). The div is 100% but when I set the width for each h2 inside the div to 33.33% the 3rd div will go down a line. 33% works, but then I have extra space left which is almost unnoticeable, but is still a problem for me. How do I fix this so the 3 h2's fit inside a 100% div so that the first h2 aligns to the left, the second centers in the middle, and the last one aligns to the right? Maybe even without having to use numbers, such as 33.33%?

This is what I have so far:

HTML:

<div class="col-md-12 bottomPadding">
   <h2 class="floatLeftBottom"><a href="/">Edit</a></h2>
   <h2 class="floatCenterBottom"><a href="/">Delete</a></h2>
   <h2 class="floatRightBottom"><a href="#">Move up</a></h2>
</div>

CSS:

.floatLeftBottom {
    display: inline-block;
    width: 33%;
    text-align: left;
    padding-bottom: 10px;
}

.floatCenterBottom {
    display: inline-block;
    width: 33%;
    text-align: center;
    padding-bottom: 10px;
}

.floatRightBottom {
    display: inline-block;
    width: 33%;
    text-align: right;
    padding-bottom: 10px;
}

picture

Possible duplicate of [How do I remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements) — Temani Afif, Feb 05 '18 at 14:24
https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div — Temani Afif, Feb 05 '18 at 14:26
https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements — Temani Afif, Feb 05 '18 at 14:27

score 2 · Answer 1 · answered Feb 05 '18 at 14:29

I recommend learning to use flexbox. It really is a time saver and has a very good browser support

CSS:

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.item {
    padding-bottom: 10px;
}

HTML:

<div class="col-md-12 flex bottomPadding">
   <h2 class="item"><a href="/">Edit</a></h2>
   <h2 class="item"><a href="/">Delete</a></h2>
   <h2 class="item"><a href="#">Move up</a></h2>
</div>

score 2 · Accepted Answer · answered Feb 05 '18 at 14:36

There are several possibilities to fix this, my preference is using a flexbox for responsiveness.

.bottomPadding {
  display: flex;
  width: 100%;
}

.floatLeftBottom,
.floatCenterBottom,
.floatRightBottom {
  width: calc(100% / 3);
}

.floatLeftBottom {
  text-align: left;
}
.floatCenterBottom {
  text-align: center;
}
.floatRightBottom {
  text-align: right;
}

<div class="col-md-12 bottomPadding">
  <h2 class="floatLeftBottom"><a href="/">Edit</a></h2>
  <h2 class="floatCenterBottom"><a href="/">Delete</a></h2>
  <h2 class="floatRightBottom"><a href="#">Move up</a></h2>
</div>

3 elements with 33.33% width exceed 100%?

2 Answers2