Wrapping versus Nesting

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

Wrapping technique

Markup

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

display:box

CSS

.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;
}

Display according to the above rules

box styling

box styling

display:table

CSS

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

Display according to the above rules

table styling

table styling

display:inline-block

CSS

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

Display according to the above rule

inline-block styling

inline-block styling

:nth-child()

CSS

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

Display according to the above rule

via :nth-child()

via :nth-child()

Nesting technique

Markup

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

display:box

CSS

.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;
}

Display according to the above rules

box styling

box styling

display:table

CSS

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

Display according to the above rules

table styling

table styling

display:inline-block

CSS

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

Display according to the above rule

inline-block styling

inline-block styling

:nth-child()

CSS

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

Display according to the above rule

via :nth-child()

via :nth-child()