Wrapping versus Nesting

This page compares the two methods against 'display' styling and :nth-child().

<div class="wrapper">
    <article>
        <div class="article">
            ...
        </div>
    </article>
    <article>
        <div class="article">
            ...
        </div>
    </article>
</div>

.wrapper {
    width:100%;
    display:-moz-box;
    display:-webkit-box;
    display:box;
       -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
            box-orient:horizontal;
}
.wrapper .article  {
       -moz-box-flex:1;
    -webkit-box-flex:1;
            box-flex:1;
}

.wrapper {
    width:100%;;	
    display:table;
}
.wrapper .article  {
    display:table-cell;
}

.article {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.article:nth-child(even) {
    background:#7AC142;
}

<div class="wrapper">
    <div class="article">
        <article>
            ...
        </article>
    </div>
    <div class="article">
        <article>
            ...
        </article>
    </div>
</div>

.wrapper {
    width:100%;
    display:-moz-box;
    display:-webkit-box;
    display:box;
       -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
            box-orient:horizontal;
}
.wrapper .article  {
       -moz-box-flex:1;
    -webkit-box-flex:1;
            box-flex:1;
}

.wrapper {
    width:100%;
    display:table;
}
.wrapper .article  {
    display:table-cell;
}

.article {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.article:nth-child(even) {
    background:#7AC142;
}

Follow me on Twitter: @thierrykoblentz