You have generated a 500px 960.gs grid system | 4 columns ~ margin left: 55px ~ margin right: 55px
The grid result is shown below (or a full screen preview)
Follow these instructions to get started:
<link rel="stylesheet" type="text/css" href="http://gridsystemgenerator.com/download/gs01/uncompressed/css/500_4_55_55.css">
/*
500px grid system ~ Core CSS.
4 Columns ~ Margin left: 55px ~ Margin right: 55px
Based on the 960.gs grid system - http://960.gs/
by Nathan Smith
Created by the Grid System Generator - v1.04
Learn more ~ http://www.gridsystemgenerator.com/
*/
/*
Forces backgrounds to span full width,
even if there is horizontal scrolling.
Increase this if your layout is wider.
Note: IE6 works fine without this fix.
*/
body {
min-width: 960px;
}
/* =Containers
--------------------------------------------------------------------------------*/
.container_4
{
margin-left: auto;
margin-right: auto;
width: 500px;
}
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4 {
display: inline;
float: left;
margin-left: 55px;
margin-right: 55px;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3 {
position: relative;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}
/* =Grid >> 4 Columns
--------------------------------------------------------------------------------*/
.container_4 .grid_1 {width: 15px;}
.container_4 .grid_2 {width: 140px;}
.container_4 .grid_3 {width: 265px;}
.container_4 .grid_4 {width: 390px;}
/* =Prefix Extra Space >> 4 Columns
--------------------------------------------------------------------------------*/
.container_4 .prefix_1 {padding-left: 125px;}
.container_4 .prefix_2 {padding-left: 250px;}
.container_4 .prefix_3 {padding-left: 375px;}
/* =Suffix Extra Space >> 4 Columns
--------------------------------------------------------------------------------*/
.container_4 .suffix_1 {padding-right: 125px;}
.container_4 .suffix_2 {padding-right: 250px;}
.container_4 .suffix_3 {padding-right: 375px;}
/* `Push Space >> 4 Columns
--------------------------------------------------------------------------------*/
.container_4 .push_1 {left: 125px;}
.container_4 .push_2 {left: 250px;}
.container_4 .push_3 {left: 375px;}
/* `Pull Space >> 4 Columns
--------------------------------------------------------------------------------*/
.container_4 .pull_1 {left: -125px;}
.container_4 .pull_2 {left: -250px;}
.container_4 .pull_3 {left: -375px;}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: "\0020";
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
zoom: 1;
}
<div class="container_4">
<h1><a href="http://www.gridsystemgenerator.com/gs01.php?GridWidth=500&GridColumns=4&GridMarginLeft=55&GridMarginRight=55">500px valid css/xhtml 960.gs grid system</a></h1>
<h2>4 columns ~ margin left: 55px ~ margin right: 55px</h2>
<div class="grid_4"><p>390px</p></div>
<!-- end .grid_4 -->
<div class="clear"> </div>
<div class="grid_1">
<p>15px</p>
</div>
<!-- end .grid_1 -->
<div class="grid_3">
<p>265px</p>
</div>
<!-- end .grid_3 -->
<div class="clear"> </div>
<div class="grid_2">
<p>140px</p>
</div>
<!-- end .grid_2 -->
<div class="grid_2">
<p>140px</p>
</div>
<!-- end .grid_2 -->
<div class="clear"> </div>
<div class="grid_3">
<p>265px</p>
</div>
<!-- end .grid_3 -->
<div class="grid_1">
<p>15px</p>
</div>
<!-- end .grid_1 -->
<div class="clear"> </div>
<div class="grid_1 suffix_3">
<p>15px</p>
</div>
<!-- end .grid_1.suffix_3 -->
<div class="clear"> </div>
<div class="grid_1 prefix_1 suffix_2">
<p>15px</p>
</div>
<!-- end .grid_1 -->
<div class="clear"> </div>
<div class="grid_1 prefix_2 suffix_1">
<p>15px</p>
</div>
<!-- end .grid_2 -->
<div class="clear"> </div>
<div class="grid_1 prefix_3 suffix_0">
<p>15px</p>
</div>
<!-- end .grid_3 -->
<div class="clear"> </div>
<div class="grid_1 push_3">
<p>Push (15px)</p>
</div>
<!-- end .grid_1 .push_3 -->
<div class="grid_3 pull_1">
<p>Pull (265px)</p>
</div>
<!-- end .grid_3.pull_1 -->
<div class="clear"> </div>
<div class="grid_2 push_2">
<p>Push (140px)</p>
</div>
<!-- end .grid_2 .push_2 -->
<div class="grid_2 pull_2">
<p>Pull (140px)</p>
</div>
<!-- end .grid_2.pull_2 -->
<div class="clear"> </div>
<div class="grid_3 push_1">
<p>Push (265px)</p>
</div>
<!-- end .grid_3 .push_1 -->
<div class="grid_1 pull_3">
<p>Pull (15px)</p>
</div>
<!-- end .grid_1.pull_3 -->
<div class="clear"> </div>
<div class="grid_4">
<p>This valid css/xhtml grid system is created by the <a href="http://www.gridsystemgenerator.com">Grid System Generator</a><br />
Based on the 960.gs grid system.<br />
<a href="http://validator.w3.org/check/referer">XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
</div>
<!-- end .grid_4 -->
<div class="clear"> </div>
</div>
<!-- end .container_4 -->
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* `Basic HTML
----------------------------------------------------------------------------------------------------*/
body {
font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
a:focus {
outline: 1px dotted;
}
hr {
border: 0 #ccc solid;
border-top-width: 1px;
clear: both;
height: 0;
}
/* `Headings
----------------------------------------------------------------------------------------------------*/
h1 {
font-size: 25px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 19px;
}
h5 {
font-size: 17px;
}
h6 {
font-size: 15px;
}
/* `Spacing
----------------------------------------------------------------------------------------------------*/
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
margin-left: 30px;
}
p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
margin-bottom: 20px;
}
