Question

I have a div (#itemSelector) containing a variable type of div (.item). I need to evenly space the .item divs in the parent div. The .item divs have display: inline-block and need to stay that way.

Just for clarity: I want the div’s contained in #itemSelector to get evenly spaced horizontally along the entire width of the div. The amount of divs in the parent can vary.

jsFiddle of the simplest usecase: http://jsfiddle.net/xTZ8z/

Edit: thirtydot suggested a solution to me which interesting looking

Created a jsFiddle of it: http://jsfiddle.net/xTZ8z/82/.

Wrapping a div around my .item divs with display: table-cell seems to work, tho this is not entirely what I’d like. Any other suggestions like this?

Answer 1

I know you stated that you needed to keep your divs with display: inline-block, but this method seems to achieve the effect you are looking for.

JSFiddle of the code: http://jsfiddle.net/xTZ8z/40/

---

EDIT: @Exelian this achieves the desired effect you are looking for: http://jsfiddle.net/xTZ8z/63/

---

EDIT: @Exelian This is a slightly altered and commented version of the previous code:
http://jsfiddle.net/xTZ8z/88/

I hope that helps!