CSS Calc block layout

by phloe

HTML

<div class="layout">
    <div class="block span-6"></div>
    <div class="block span-6"></div>
    <div class="block span-4"></div>
    <div class="block span-4"></div>
    <div class="block span-4"></div>
</div>

CSS

.layout {
    margin: 0 -1%;
    margin: 0 calc(-10px);
}
.block {
    margin: 10px 1%;
    margin: calc(10px);
    width: 98%;
    width: calc(100% - 20px);
    float: left;
    background-color: #EEE;
    min-height: 300px;
}

.span-6 {
    width: 48%;
    width: calc(50% - 20px);
}

.span-4 {
    width: 31.3333333333%;
    width: calc(33.3333333333% - 20px);
}