Evenly space div items across row using CSS

So this is a problem I am had for a while and now I have an answer to the question of how to evenly spread items such a divs across a row that is mobile responsive without using floats.

Here is the HTML

<div class="wrapper">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
<!-- EOF wrapper-->

and here is the CSS

#wrapper {
    text-align: justify;
}
#wrapper > div {
    width: 100px; /* can use relative dimension */
    display: inline-block;
    vertical-align: top;
}
#wrapper:after {
    content: "";
    width: 100%;
    display: inline-block;
}

Simple as that!

Leave a Comment