Child div's evenly spaced and flushed to side of parent: how to?

http://stackoverflow.com/questions/8684808/child-divs-evenly-spaced-and-flushed-to-side-of-parent-how-to

by Wexcode

HTML

<div class="inline-block">
    <span></span><span></span><span></span><span></span><span></span><span></span>
</div>

<div class="float">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

div {
    background: blue;
    margin: 0 0 10px;
    width: 330px; }
span {
    background: red;
    width: 100px;
    height: 50px;
    margin: 5px; }
.inline-block { 
    line-height: 0; }
.inline-block span { display: inline-block; }
.float { overflow: hidden; }
.float span { float: left; }