Grid

by adamh

HTML

<div class="container">
    <div class="row">
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1">&nbsp;</div>
        <div class="span1 outset">&nbsp;</div>
    </div>
    <div class="row">
        <div class="span2">&nbsp;</div>
        <div class="span2">&nbsp;</div>
        <div class="span2 outset">&nbsp;</div>
        <div class="span2">&nbsp;</div>
        <div class="span2">&nbsp;</div>
        <div class="span2">&nbsp;</div>
    </div>
</div>

CSS

.container {
    
}

.row {
    width: 960px;
    margin: 0 auto;
    background: #ddd;
    height: 1%;
    overflow: auto;
}

[class^="span"] {
    margin: 4px 10px;
    float: left;
    background: #eee;    
}

[class^="span"].outset {
    margin: 4px 0;
}

.span1 {
    width: 60px;
}
.span1.outset {
    width: 80px;
}

.span2 {
    width: 140px;
}
.span2.outset {
    width: 160px;
}