Fluid width with equally spaced DIVs

by

The easiest way to do this now is with a flexbox:

A Complete Guide to Flexbox

The CSS is then simply:

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

demo: http://jsfiddle.net/QPrk3/

However, this is currently only supported by relatively recent browsers (http://caniuse.com/flexbox).
Also, the spec for flexbox layout has changed a few times, so it’s possible to cover more browsers by additionally including an older syntax:

“Old” Flexbox and “New” Flexbox

Using Flexbox: Mixing Old and New for the Best Browser Support

Leave a Comment

tech