combine-layout plus

Interleaved content.

by phloe

HTML

<div class="combine-layout">
    <div class="span-12 (medium) combine-break"></div>
    <div class="span-5"></div>
    <div class="span-5 combine-break"></div>
    <div class="span-6 (medium) combine-break"></div>
    <div class="span-3"></div>
    <div class="span-3"></div>
    <div class="span-3"></div>
    <div class="span-3 combine-break"></div>
    <div class="span-3 combine-divide"></div>
    <div class="span-2 (banner)"></div>
    <div class="span-6 (banner)"></div>
    <div class="span-9 (banner)"></div>
</div>

CSS

.combine-layout {
    text-align: right; /* align inline-blocks right */
    font-size: 0; /* make sure whitespace between inline-blocks doesn't ruin the layout */
}
.combine-layout:after {
    /* clear those floats */
    display: table;
    clear: both;
    content: " ";
}
.combine-layout > * {
    float: left; /* float blocks by default */
    text-align: left; /* reset text-align right */
    font-size: 16px; /* reset font-size to something sane */
}
.combine-break + * {
    clear: left; /* make sure floated blocks start new row with .break */
}
.combine-divide ~ * {
    /* start new pseudo column by switching from floated blocks to inline-blocks */
    display: inline-block; /* duh */
    vertical-align: top; /* make sure blocks align at top */
    float: none; /* reset float */
}
.combine-divide ~ .combine-break {
    clear: none; /* reset .break occurring after .divide */
}

.span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-12 {
    -webkit-box-sizing: border-box; /* good old border-box */
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}
.span-2 {
    width: 16.6666666666%;
}
.span-3 {
    width: 25%;
}
.span-4 {
    width: 33.3333333333%;
}
.span-5 {
    width: 41.6666666666%;
}
.span-6 {
    width: 50%;
}
.span-7 {
    width: 58.3333333333%;
}
.span-8 {
    width: 66.6666666666%;
}
.span-9 {
    width: 75%;
}
.span-10 {
    width: 83.3333333333%;
}
.span-12 {
    width: 100%;
}

.combine-layout {
    counter-reset: items;
    background-color: #08c8ff;
    padding: 10px;
}
.combine-layout > * {
    position: relative;
}
.combine-layout > *:before,
.combine-layout > *:after{
    display: block;
    padding: 10px;
    font: bold 12px/1 Helvetica, Arial;
    color: #7f7f7f;
 }

.combine-layout:before {      
    content: attr(class);
    color: #FFF;
    font: bold 18px/1 Helvetica, Arial;
    padding: 10px;
    display:...