5/16/2013 - 12:45 AM



/* Fix the width of the body */
body {
	min-width: 960px;

/* Wrapper */
.row {

/* Column margins */
.col_12, /* full width */
.col_9, /* 3/4 width */
.col_8, /* 2/3 width */
.col_6, /* half width */
.col_4, /* 1/3 width */
.col_3 /* 1/4 width */
	margin-left: 10px;
	margin-right: 10px;
	display: inline;
	float: left;

/* First and Last */
.first {

.last {

/* Column widths taking into account the margins */
.col_12 {width:940px;}
.col_9 {width:620px;}
.col_8 {width:700px;}
.col_6 {width:460px;}
.col_4 {width:220px;}
.col_3 {width:300px;}


<!DOCTYPE html PUBLIC “-/​/​W3C/​/​DTD XHTML 1.0 Transitional/​/​EN” “http://​www​.w3​.org/​T​R​/​x​h​t​m​l​1​/​D​T​D​/​x​h​t​m​l​1​-​t​r​a​n​s​i​t​i​o​n​a​l​.dtd”>
<html xmlns=“”>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ /​>
<title>Sample 960, 12 Column Grid Layout</title>

	<div class=“row”>
		<div class=“col_12 first” style=“background-color:#936″><p>Here’s a full width column</p></div>
	<div class=“row”>
		<div class=“col_9 first” style=“background-color:#3F6”><p>Here’s a 3/​4 width column</p></div>
		<div class=“col_3 last” style=“background-color:#6CC”><p>And it’s 1/​4 width counterpart</p></div>
	<div class=“row”>
		<div class=“col_8 first” style=“background-color:#CF0”><p>Here’s a 2/​3 width column</p></div>
		<div class=“col_4 last” style=“background-color:#9CC”><p>And it’s 1/​3 width counterpart</p></div>
	<div class=“row”>
		<div class=“col_4 first” style=“background-color:#9CC”><p>I’m a 1/​3 width first</p></div>
		<div class=“col_8 last” style=“background-color:#CF0”><p>And I’m a 2/​3 width last</p></div>
	<div class=“row”>
		<div class=“col_6 first” style=“background-color:#9CC”><p>Want to go halfsies?</p></div>
		<div class=“col_6 last” style=“background-color:#CF0”><p>Sure, I’ll go halfsies!</p></div>
	<div class=“row”>
		<div class=“col_3 first” style=“background-color:#CF0”><p>Here’s a 1/​3 width column</p></div>
		<div class=“col_3” style=“background-color:#9CC”><p>I’m a 1/​3 width column, too!</p></div>
		<div class=“col_3 last” style=“background-color:#9CC”><p>I’m the last 1/​3 width :^(</p></div>
	<div class=“row”>
		<div class=“col_4 first” style=“background-color:#CF0”><p>Can we do 1/​4 column</p></div>
		<div class=“col_4” style=“background-color:#9CC”><p>Sure we can do 1/4!</p></div>
		<div class=“col_4” style=“background-color:#9CC”><p>I echo that sentiment!</p></div>
		<div class=“col_4 last” style=“background-color:#9CC”><p>Why am I always last? :^(</p></div>
	<div class=“row”>
	<div class=“col_12 first” style=“background-color:#936″><p>Here’s a full width footer column</p></div>