Skip to content

Instantly share code, notes, and snippets.

@jakejscott

jakejscott/gist:1626709

Created January 17, 2012 14:00
Show Gist options
  • Save jakejscott/1626709 to your computer and use it in GitHub Desktop.
Save jakejscott/1626709 to your computer and use it in GitHub Desktop.
Download ZIP
Wookmark style grid
Raw
gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div class="clearfix">
Before Grid
</div>
<div class="grid">
<div class="row clearfix">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
<div class="col">col 4</div>
</div>
<div class="row clearfix">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
<div class="col">col 4</div>
</div>
</div>
<div class="clearfix">
After Grid
</div>
</div>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: none repeat scroll 0 0 #E9E9E9;
}
#wrapper {
width: 942px;
margin: 0 auto;
}
.row {
width: 962px;
margin-left: -2px;
}
.col {
margin-left: 2px;
margin-bottom: 2px;
width: 196px;
float: left;
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
border-radius: 2px 2px 2px 2px;
padding: 18px;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment