auto space between horizontal divs in CSS

Question

I\'ve searched a lot but I was not lucky to find a solution to what I am after!

Here is the issue: I\'ve created a master div (width 100%) and within it there are severa

Answer 1

You can achieve this effect by putting display:inline-block on all child elements, and then apply text-align-last:justify to the parent container to enable evenly spaced inline child elements.

See working Fiddle here.

There are a few caveats however - while Firefox has supported this since v12, and IE even since 5.5, there is officially no support in Webkit. It is however working fine in Chrome 32-beta with certain flags enabled, while it's not working in Chrome 31-stable or current iOS Safari builds for example.

Secondly, IE seems to only respect text-align-last when there is also a text-align declaration of the same type (which doesn't conform to standards).

I am not aware of any way to achieve this effect cleanly in another way in older Webkit browsers, but you could solve this by a margin-based fallback for example, or have a JS-based calculation at runtime.