Evenly Spaced Items

CSS only solution to evenly space items even when container has a variable width.

by kthornbloom

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#container {
  text-align: justify;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
}
#container div {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: red;
}
#container:after {
  content: '';
  width: 100%;
  display: inline-block;
}