10 divs in a row 10% each

Question

This seems so simple. I'm trying to get 10 divs inside a parent div all 10% wide. The parent div is 960px and centered on the page with margin:0 auto and had a red background. It does not matter if I make the with of .tenPercent 10% or 96px. The result is the same, only 9 fit and the 10th wraps. There looks to be a left margin (or padding maybe) on them but what would cause this?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">  
    .tenPercent
    {
        color:Black;
        display:inline-block;            
        border:1px solid black;
        width:10%;
    }

</style>
</head>
<body>
<div style="width:960px;background-color:Red;margin:0 auto">
    <div class="tenPercent">1</div>
    <div class="tenPercent">2</div>
    <div class="tenPercent">3</div>
    <div class="tenPercent">4</div>
    <div class="tenPercent">5</div>
    <div class="tenPercent">6</div>
    <div class="tenPercent">7</div>
    <div class="tenPercent">8</div>
    <div class="tenPercent">9</div>
    <div class="tenPercent">10</div>
</div>
</body>
</html>

Just use your browsers development console to look what causes that extra space to be used. — arkascha, Oct 01 '15 at 20:09
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Vucko, Oct 01 '15 at 20:11
@arkascha its literally because the html is on separate lines. display inline block is glitchy like that. — Mark, Oct 01 '15 at 20:11
People are suggesting that you use floats, but they are gross for grid layouts, which is more along the lines of what you are trying to achieve. — UltraSonja, Oct 01 '15 at 20:28

Ori Drori · Accepted Answer · 2015-10-01T20:23:56.093

You have 2 problems in your CSS:

The space between the divs is because the inline-blocks are separated by a white space. You can remove the space with font-size: 0;.
The 2nd problem is the width of the elements, which is effected by the border. box-sizing: border-box; will fix that.

.container {
  width: 960px;
  background-color: Red;
  margin: 0 auto;
  font-size: 0; /** this removes the space between the divs **/
}
.tenPercent {
  box-sizing: border-box; /** this adds the borders into the width **/
  color: Black;
  display: inline-block;
  border: 1px solid black;
  width: 10%;
  font-size: 14px;
}

<div class="container">
  <div class="tenPercent">1</div>
  <div class="tenPercent">2</div>
  <div class="tenPercent">3</div>
  <div class="tenPercent">4</div>
  <div class="tenPercent">5</div>
  <div class="tenPercent">6</div>
  <div class="tenPercent">7</div>
  <div class="tenPercent">8</div>
  <div class="tenPercent">9</div>
  <div class="tenPercent">10</div>
</div>

Thanks, I stuck the border in just to see what was going on. Can't believe I did not run into white space between DIVs problem before. Appreciate it! — RichP, Oct 01 '15 at 22:13
@RichP - you're welcome. I've had my share of the bloody white space :) — Ori Drori, Oct 01 '15 at 22:20

score 3 · Answer 2 · edited May 23 '17 at 12:29

3

You should use float: left instead of display: inline-block.

In addition, the border is excluded in the width calculation, so actually your elements are 10% + 2 pixels (1px on the left and 1px on the right). You should add a box-sizing property:

.tenPercent {
    color: #000;
    float: left;           
    border: 1px solid black;
    width: 10%;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Since you're now using float for the child elements, you'll also need to add a clearfix to the container. It's probably best to add a class to the container (something semantic like container), and then use the following CSS:

.container {
    width: 960px;
    background: red;
    margin: 0 auto;
}
    .container:after {
        display: table;
        content: '';
        clear: both;
    }

jsFiddle Demo

edited May 23 '17 at 12:29

Community

1
1

answered Oct 01 '15 at 20:12

BenM

52,573
26
113
168

Agree, however, [prefixes for `box-sizing` aren't needed anymore](http://caniuse.com/#feat=css3-boxsizing). – Vucko Oct 01 '15 at 20:18
@Vucko, I guess you're right. Force of habit for me haha! – BenM Oct 01 '15 at 20:21
I know what you mean, I do the same thing :D – Vucko Oct 01 '15 at 20:25
I think his layout is more like a grid, in which case I wouldn't suggest using floats. – UltraSonja Oct 01 '15 at 20:31
@UltraSonja bootstrap and foundation use floats for their grid so I disagree. – Vucko Oct 01 '15 at 20:33
@Vucko Let's agree to disagree. I still use Bootstrap in one of my web apps, but have recently been using Angular Material, which takes advantage of flexbox instead of using floats. It's true that more applications use float-based grids like what Bootstrap offers, but that's just because it's been around longer. Flexbox is still relatively new, and I think that it will replace floats for grid-based layouts. – UltraSonja Oct 01 '15 at 20:37
@UltraSonja flexbox has bad support for IE and andorid browsers so if you don't need it, flexbox is definitely the way to go (I've used Semantic UI and I had trouble with those browsers). But if you need to support those browsers, then floating or inline-block is the answer, which both have their up and down sides. – Vucko Oct 01 '15 at 20:42

Paulie_D · Answer 3 · 2015-10-01T20:35:22.007

You have other options than float and display:inline-block;

flexbox can do that very easily...no clearfixing, no whitespace...simple.

Support: IE10+ per CanIUse.com

* {
  box-sizing: border-box;
  margin: 0;
}
.parent {
  background-color: plum;
  text-align: center;
  margin: 0 auto;
  display: flex;
}
.tenPercent {
  flex: 0 0 10%;
  /* restricted to 10% width */
  border: 1px solid grey;
}

<div class="parent">
  <div class="tenPercent">1</div>
  <div class="tenPercent">2</div>
  <div class="tenPercent">3</div>
  <div class="tenPercent">4</div>
  <div class="tenPercent">5</div>
  <div class="tenPercent">6</div>
  <div class="tenPercent">7</div>
  <div class="tenPercent">8</div>
  <div class="tenPercent">9</div>
  <div class="tenPercent">10</div>
</div>

This is the best solution for what the OP is trying to achieve. — UltraSonja, Oct 01 '15 at 20:32

score 2 · Answer 4 · answered Oct 01 '15 at 20:13

2

Your css for should look like this:

.tenPercent {
    color:Black;
    float:left;
    box-sizing: border-box;
    display:inline-block;
    border:1px solid black;
    width:10%;
}

Notice the additions of float: left and box-sizing. float: left will get rid of the spacing, while box-sizing: border-box; will take care of the pixels added from the borders.

Here's a fiddle to play with: http://jsfiddle.net/0ztoe6tk/

answered Oct 01 '15 at 20:13

Platte Gruber

2,935
1
20
26

Since the OP is defining a background on the container element, it's worth noting that they will need to apply a clearfix to it when using `float`. – BenM Oct 01 '15 at 20:17

score 1 · Answer 5 · answered Oct 01 '15 at 20:09

Add the float:left; to the .tenPercent class.

It's from display: inline-block. If you float your columns to the left they will work as expected.

When you use display: inline-block spaces/returns etc between the elements that have inline-block applied to them will be taken into account and rendered. You can think of it as adding a single space between each inline-block element.

This is the main downside of using display: inline-block over floats in my humble opinion.

Please note that his elements are actually `10% + 2px` wide, so even using `float: left`, 10 will not fit. — BenM, Oct 01 '15 at 20:16

score 1 · Answer 6 · edited May 23 '17 at 12:14

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. from here

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.Row {
}
.Row__item {
  color: #000;
  display: inline-block;            
  border: 1px solid black;
  width: 10%;
  margin: 0;
}

<div class="Row"><div class="Row__item">1</div><div class="Row__item">2</div><div class="Row__item">3</div><div class="Row__item">4</div><div class="Row__item">5</div><div class="Row__item">6</div><div class="Row__item">7</div><div class="Row__item">8</div><div class="Row__item">9</div><div class="Row__item">10</div></div>

10 divs in a row 10% each

6 Answers6