960 Grid System Tutorial
Other Tips
Styling Elements
If you want a border/padding around one of your elements, this can cause problems as the size of the border alters the spacing between the elements (and ultimately your page design). This problem is overcome by specifying another element within that does not have a specified width or height. You then style this (with borders, padding etc…). This makes sure that the maximum width of the outer element is still the ones specified in the grid system, and makes sure this does change depending on what is done within the element.
<body>
<div class="container_12">
<div class="grid_12">
<div class="red">
<h1>Site Heading</h1>
</div>
</div>
<div class="clear"></div>
<div class="grid_3">
<div class="green">
<h2>Menu</h2>
</div>
</div>
<div class="grid_9">
<h2>Page Content</h2>
<div class="grid_3 alpha">
<div class="red">
<h3>Item 1</h3>
</div>
</div>
<div class="grid_3">
<div class="green">
<h3>Item 2</h3>
</div>
</div>
<div class="grid_3 omega">
<h3>Item 3</h3>
</div>
</div>
<div class="clear"></div>
<div class="grid_12">
<div class="blue">
<p>footer text</p>
</div>
</div>
</div>
</body>
Browser Compatibility
Although the framework is on the whole compatible across browsers and platforms, do not assume that your web page is. It is still important that you validate the CSS and check your site on different platforms with different browsers (and if possible, different versions).
