Evenly space divs with percentage width?

Question

I'd like six percentage-width divs to be spaced evenly along a 100% width div, filling up the entire 100% width, but with a small margin between them.

Here is a JSFiddle showing the issue:

http://jsfiddle.net/uQcGS/1/

Or code here:

<div class="container">
    <div class="inner red">&nbsp;</div>
    <div class="inner orange">&nbsp;</div>
    <div class="inner yellow">&nbsp;</div>
    <div class="inner green">&nbsp;</div>
    <div class="inner blue">&nbsp;</div>
    <div class="inner purple">&nbsp;</div>
</div>
div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
.container { 
  width: 100%;
}
.inner { 
  width: 16%;  
  display: inline-block;
  margin: 1px;
}

Currently the margin is causing them to break across two lines.

I've found some hacks for similar problems, but I am not sure how to apply them to my specific issue.

score 5 · Accepted Answer · edited May 23 '17 at 11:49

5

Elements in the inline formatting context will cause a small horizontal "margin" caused by spaces or carriage returns within your HTML. By removing the space, you'll remove the margins. There are some other techniques to overcome this behaviour as well, one of them is just using float instead

http://jsfiddle.net/uQcGS/9/

edited May 23 '17 at 11:49

Community

1
1

answered Jun 05 '13 at 16:58

Adrift

58,167
12
92
90

1

+1'd for the additional information and pointer to relevant W3C spec. – Jason M. Batchelor Jun 05 '13 at 17:01
Thanks, but there's actually a bit more to the question (I've edited it to clarify). If you make the container narrow, like 100px or less, the divs break again - presumably because the margins take up more than 4% (100-(16*6)%) of the width. – Richard Jun 05 '13 at 17:38
Ah - changing the margin to 0.3% fixes that problem. Thanks! – Richard Jun 05 '13 at 17:39
when you shrink the page small enough, it still messes up though! – Chet Dec 19 '14 at 08:20

score 1 · Answer 2 · answered Jun 05 '13 at 16:58

You can put all <div>s in one line without any whitespace characters in between.

<div class="container">
    <div class="inner red">&nbsp;</div><div class="inner orange">&nbsp;</div><div class="inner yellow">&nbsp;</div><div class="inner green">&nbsp;</div><div class="inner blue">&nbsp;</div><div class="inner purple">&nbsp;</div>
    <!-- Plus arbitrarily many more boxes... -->
</div>

Those whitespace characters cause and additional space between your <div> elements.

score 1 · Answer 3 · answered Jun 05 '13 at 17:00

Your margin, plus the width of the elements AND the whitespace between them totals more than 100% which is causing the break. Float them to remove the space, and adjust your calculations so that the total isn't greater than 100%.

Change your CSS to:

.inner {
    width: 14%;
    display: inline-block;
    margin: 1%;
    float:left;
}

jsFiddle example

ebram khalil · Answer 4 · 2013-06-05T17:09:54.263

0

i have update your code kindly check it JSFIDDLE

all you need to do is just 3 steps:

Remove display: inline-block; and use instead float:left(using float is better you just need to understand it good)
Decrese the width little bit(i suggest 16%) and use percentage in margin(i suggest 1%)
Always after using float don't forget to put div with style clear:both

edited Jun 05 '13 at 17:09

answered Jun 05 '13 at 17:02

ebram khalil

8,252
7
42
60

score 0 · Answer 5 · answered Jun 05 '13 at 17:05

0

This should work:

.inner {
    width: 15%;
    display: inline-block;
    margin-right: 2%;
    float:left;
}
.inner:last-child {
    margin-right: 0;
}

http://jsfiddle.net/pulleasy/uQcGS/7/

answered Jun 05 '13 at 17:05

Daniel

4,082
3
27
46

Evenly space divs with percentage width?

5 Answers5