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.

Illation

Define "space them evenly" – Lasso

@Lasso the same amount of white space between the edges of each DIV – Illation

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. – Lasso

@Lasso 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)? – Illation

how do you set the width of the inner divs and the container div if any? – Histrionic

You've not identified any requirement that depends on the widths of the divs, only that there be equal spacing between them. – Lasso

@Lasso Sorry. I updated the post. – Illation

Answer 1

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 .

Swats

well, looks like you already have the answer on the other post !? – Swats

@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. – Illation

this post you related to #6865694 , for IE8 it should work unless , it understand the :after pseudo elements, unless you use a quirk mode. – Swats

maybe you should test it in full page mode with IE8 s.codepen.io/gc-nomade/fullpage/GyiCv? – Swats

... IE needs a font-size:0.01px and not font-size:0; in order to show the after element :)... forgot about this – Swats

The post I referred to requires equally sized divs. – Illation

do not give a width to the divs, as for both links i gave you :) . – Swats

@DonRhummy did this answer sold your issue by the way ? – Swats

no, i needed to support older browser's also (as my post states, IE8) and they don't support flex – Illation

@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 ;) – Swats

Answer 2

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/

Fremd

@DonRhummy thank you, i'am aware of that. It's a shame, but we are used to frustration with IE... arent we? ;) – Fremd

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. – Fremd

@DonRhummy you did See my answer is not about display-flex Right? If the answer does Not fit please Tell me whats missing – Fremd

Answer 3

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.

Cashier

Answer 4

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;
}

Defeatism