grid layout

by nickpish

HTML

<div id="content" class="cf">
            <div class="item w1" style="height:250px">
                <div class="inner">nav &amp; intro copy</div>
            </div>
            <div class="item w2" style="height:350px">
                <div class="inner">banner</div>
            </div>
            <div class="item w2" style="height:300px">
                <div class="inner">block 1</div>
            </div>
            <div class="item w2" style="height:150px">
                <div class="inner">quote 1</div>
            </div>
            <div class="item w2" style="height:300px">
                <div class="inner">video 1</div>
            </div>
            <div class="item w1" style="height:250px">
                <div class="inner">news/speaking</div>
            </div>
            <div class="item w2" style="height:150px">
                <div class="inner">quote 2</div>
            </div>
            <div class="item w2" style="height:300px">
                <div class="inner">video 2</div>
            </div>
            <div class="item w2" style="height:150px">
                <div class="inner">quote 3</div>
            </div>
            <div class="item w2" style="height:300px">
                <div class="inner">video 3</div>
            </div>
            <div class="item w1" style="height:275px">
                <div class="inner">contact</div>
            </div>      
        </div><!-- /#content -->

CSS

/*-------------------- body content --------------------- */
#content {
    max-width: 960px;
    margin: 0 auto;
    padding: 1%;
}
.item {
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    background-color: #333;
    margin-bottom: 3%;
}
.item.w1 {
    width: 25%;
    margin-right: 3%;
    float: left;
}
.item.w2 {
    width: 71.5%;
    float: right;
}
.inner {
    padding: 15px;
}


/*-------------------- media queries --------------------- */
/* tablets (landscape) ----------- */
@media only screen 
and (max-width : 1024px) 
and (orientation : landscape) {

}

/* tablets (portrait) ----------- */
@media only screen 
and (max-width : 768px) 
and (orientation : portrait) {
    .item.w1, .item.w2 {
        float: none;
        width: 100%;
    }
    
}

/* smartphones (landscape) ----------- */
@media only screen 
and (max-width : 481px) {

}

/* smartphones (portrait) ----------- */
@media only screen 
and (max-width : 321px) {
    
}

/*-------------------- reset stylesheet --------------------- */
html, body, div, span, h1, h2, h3, p, a, ul, ol, li, img, article, aside, blockquote, figure, figcaption, footer, header, hgroup, menu, nav, section, time {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
    font-weight: normal;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, time {
	display: block;
}
a {
	outline: none;
}


/*-------------------- clearfix --------------------- */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}