How evenly space divs (each of a different width) within a parent div?

Question

I have seen this solution for evenly spacing DIVs: (Fluid width with equally spaced DIVs) but it requires that the DIVs are all of the same width. This will not work in my case. I have 5 DIVs that are all of different widths and would like to space them evenly. Is this possible without javascript?

For example:

<!-- The text should not wrap, but be on one line for each div -->
<div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>

I need it to work in IE8+, Firefox 4+, Chrome, Safari.

EDIT: One other requirement: the divs should have no space to the right of the last DIV or left of the first DIV. So the whitespace between them is equal to the difference between the sum of their widths and the width of the container div.

@Madbreaks the same amount of white space between the edges of each DIV — Don Rhummy, Feb 06 '14 at 18:12
If that's really your only requirement, just use the same left/right margin for each, and disable left margin for left-most, right margin for right-most. — Madbreaks, Feb 06 '14 at 18:12
@Madbreaks How would I do that if I don't know the div's widths beforehand (since every browser makes text at slightly different real widths even with "px" specified)? — Don Rhummy, Feb 06 '14 at 18:15
how do you set the width of the inner divs and the container div if any? — Miller, Feb 06 '14 at 18:16
You've not identified any requirement that depends on the widths of the divs, only that there be equal spacing between them. — Madbreaks, Feb 06 '14 at 18:17

score 19 · Answer 1 · answered Feb 06 '14 at 18:20

19

you could use : display:flex; on a parent container

.evenly {
  display:flex;
  justify-content:space-between;
  border:solid;
}
.evenly div {
  white-space:nowrap;
  background:gray;
}

<div class="evenly">
  <div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>
</div>

DEMO: http://codepen.io/anon/pen/wxtqJ

extra border and background for demo purpose.

If you need an alternative that works for older nav, you can use text-align:justify properties: http://codepen.io/anon/pen/FnDqr .

answered Feb 06 '14 at 18:20

G-Cyrillus

101,410
14
105
129

well, looks like you already have the answer on the other post !? – G-Cyrillus Feb 06 '14 at 18:26
1

@GCyrillius This doesn't work in IE8+. And what other post has the answer? I've only seen an answer for equally sized DIVs, which mine are not. – Don Rhummy Feb 06 '14 at 18:34
this post you related to http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs , for IE8 it should work unless , it understand the :after pseudo elements, unless you use a quirk mode. – G-Cyrillus Feb 06 '14 at 18:40
maybe you should test it in full page mode with IE8 http://s.codepen.io/gc-nomade/fullpage/GyiCv? – G-Cyrillus Feb 06 '14 at 18:42
... IE needs a font-size:0.01px and not font-size:0; in order to show the after element :)... forgot about this – G-Cyrillus Feb 06 '14 at 18:51
The post I referred to requires equally sized divs. – Don Rhummy Feb 06 '14 at 22:41
do not give a width to the divs, as for both links i gave you :) . – G-Cyrillus Feb 07 '14 at 06:09
@DonRhummy did this answer sold your issue by the way ? – G-Cyrillus Jan 17 '16 at 18:40
no, i needed to support older browser's also (as my post states, IE8) and they don't support flex – Don Rhummy Jan 18 '16 at 00:06
@DonRhummy okay, did you notice the alternative with text-align-justify that would even work in IE if you used an extra tag instead a pseudo ? asking just because i'm curious ;) – G-Cyrillus Jan 18 '16 at 14:19

score 3 · Answer 2 · answered Feb 06 '14 at 19:12

3

I prefer display:flex; like said in the answer before. But there is another solution if i understood the requirements correctly. Since i don't have a IE8 TestVM here, I let the testing to you. You can use display: table;

Following solution:

.items
{
    display: table;
    width: 100%;
}
.item
{
    display:table-cell;
}

With this HTML

<div class="items">
    <div class="item" id="item1">Item One</div>
    <div class="item" id="item2">Item # Two</div>
    <div class="item" id="item3">Item Three</div>
    <div class="item" id="item4">Item Four</div>
    <div class="item" id="item5">Item Five, the Last is pretty long</div>
</div>

Test fiddle: http://fiddle.jshell.net/HLFXH/

answered Feb 06 '14 at 19:12

Nico O

13,762
9
54
69

@DonRhummy thank you, i'am aware of that. It's a shame, but we are used to frustration with IE... arent we? ;) – Nico O Feb 06 '14 at 19:15
I have the strange feeling that I missed some of the requirement... Because if it was that easy, there would have been more answers... @op if I missed something please add a comment. – Nico O Feb 06 '14 at 19:24
1

@DonRhummy you did See my answer is not about display-flex Right? If the answer does Not fit please Tell me whats missing – Nico O Feb 06 '14 at 20:02

score 0 · Answer 3 · answered Mar 05 '20 at 12:22

I was checking solution for this issue as I also wanted to show structure similar to yours but only three divs. so,I added one more div inside .item

<div class="items">
    <div class="item" id="item1"><div>Item One</div></div>
    <div class="item" id="item2"><div>Item # Two</div></div>
    <div class="item" id="item3"><div>Item Three</div></div>
    <div class="item" id="item4"><div>Item Four</div></div>
    <div class="item" id="item5"><div>Item Five, the Last is pretty long</div></div>
</div>

And I gave ".item" class width in percent or px. I took the width of longest div and used justify-content as space-between, then align the individual div inside ".item" accordingly.

Hope this will help.

score 0 · Answer 4 · answered Mar 10 '22 at 00:32

0

There is this simple solution if you are able to use flexbox

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

css

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

answered Mar 10 '22 at 00:32

Rohit Gupta

4,022
20
31
41

How evenly space divs (each of a different width) within a parent div?

4 Answers4