Skip to content

Instantly share code, notes, and snippets.

@jimjeffers

jimjeffers/960grid.html

Created February 1, 2009 01:42
Show Gist options
  • Save jimjeffers/55746 to your computer and use it in GitHub Desktop.
Save jimjeffers/55746 to your computer and use it in GitHub Desktop.
Download ZIP
CSS/XHTML for displaying a 960 grid overlay on a website.
Raw
960grid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>960.gs Grid</title>
<style type="text/css">
#grid {
background: rgba(255,255,255,0.1);
height: 100%;
left: 50%;
margin-left: -480px;
position: fixed;
top: 0;
width: 960px;
}
#grid li {
background: rgba(255,0,0,.25);
display: block;
height: 100%;
width: 40px;
float: left;
margin-right: 20px;
}
#grid li:last {
margin-right: 0;
}
</style>
</head>
<body>
<ul id="grid">
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment