steveosoule
5/16/2013 - 12:45 AM

simple-960-grid.css

simple-960-grid.css

simple-960-grid.css
content_copyfile_download
/* Fix the width of the body */
body {
	min-width: 960px;
	margin:auto;
}

/* Wrapper */
.row {
	width:960px;
	margin:auto;
}

/* 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 {
	margin-left:0;
}

.last {
	margin-right:0;
}

/* 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=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ /​>
<title>Sample 960, 12 Column Grid Layout</title>
</​head>

<body>
	<div class=“row”>
		<div class=“col_12 first” style=“background-color:#936″><p>Here’s a full width column</p></div>
	</​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>
	<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>
	<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>
	<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>
	<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>
	<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>
	<div class=“row”>
	<div class=“col_12 first” style=“background-color:#936″><p>Here’s a full width footer column</p></div>
</​div>
</​body>
</​html>

 */