Leverage 960.gs for Page Layout
The 960 grid system is a great tool for streamlining your web development effort by providing a convention around the most commonly used dimensions, based on a width of 960 pixels. You can learn more about this system at 960.gs, or you can experiment with the HTML LAYOUT Generator.
What I wanted to address in this article was some basic CSS/HTML techniques that integrate the core concepts of the 960 grid system to easily allow you to achieve beautifully laid out web pages.
Here at Black Ninja, we do a fair bit of site design and so we wanted to build a consistent framework that we use across all our sites. It had to be flexible, easy to understand and powerful for customization.
Let’s get into some specific examples so that we can see the types of options and flexibility we have when trying to layout our pages and the content within them.
To setup our scenario, what we really wanted with this layout was a centered fixed width design, that when resized, had the effect of expanding the area around our content, but did not alter the content itself. We wanted to avoid fluidity that was hard to predict. We also don’t feel that pages need to necessarily scale for every resolution. A 27” monitor has a lot of real estate for web page viewing, but do users actually use the full screen width when viewing their pages?
For example, compare sites like chapters.indigo.ca and amazon.ca. Both have the same function, but their layout is entirely different. Amazon has content areas within the center that expand and shrink as you resize your browser window. The Chapters website content is centered and does not alter in anyway. The only thing that changes is the white space around the main content. The Chapters effect is what I’m going to demonstrate here.
Let’s start by creating a new page, we’ll call it index.html and we’ll insert a header, main content area and a footer:
<!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" lang="en"> <head> <title>960.gs Demo</title> </head> <body> <div id="header"> this is my header </div> <div id="main"> this is my main content area </div> <div id="footer"> this is my footer </div> </body> </html>
If we save the page and open it in a browser, we should see:
Starting with the header, we’re going to want to center this, and have control over the style of both the centered content and the wrapper content. In order to achieve this, I’m going to add a div inside the header div, and i’m going to apply some styles to both:
<!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" lang="en">
<head>
<title>960.gs Demo</title>
<style>
body {
margin: 0;
text-align: left;
padding: 0;
font: normal 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #FFF;
color: #333;
}
#header {
background-color:#FFF;
}
#header-inner {
margin: 0 auto;
width: 940px;
height: 30px;
padding: 10px 20px;
background-color:#333;
color:#FFF;
}
</style>
</head>
<body>
<div id="header">
<div id="header-inner">
this is my header content
</div>
</div>
<div id="main">
this is my main content area
</div>
<div id="footer">
this is my footer
</div>
</body>
</html>So the two key pieces to the above code is the #header and #header-inner styles. The margin:0 auto gives us the effect of centering our div. We set our width of 940px, the height we want to size our header to, and some extra padding so everything isn’t packed so close together. The background colors for both #header and #header-inner are entirely up to you. If you’d like the two to blend, set the colors to be the same. If you want a contrast effect, make them different. And here is the effect:
Let’s make a minor change to the #header class and set the background color to be the same as our #header-inner:
#header { background-color:#333; }
Save and reload:
So now as the window is resized, the content within the center remains at 940px and won’t change at all.
Let’s apply this same concept to the content area of our site. First, let’s throw some dummy content in there:
<!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" lang="en">
<head>
<title>960.gs Demo</title>
<style>
body {
margin: 0;
text-align: left;
padding: 0;
font: normal 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #FFF;
color: #333;
}
#header {
background-color:#333;
}
#header-inner {
margin: 0 auto;
width: 940px;
height: 30px;
padding: 10px 20px;
background-color:#333;
color:#FFF;
}
</style>
</head>
<body>
<div id="header">
<div id="header-inner">
this is my header content
</div>
</div>
<div id="main">
<div id="main-inner">
<p class="lead">Let's talk about our site a little bit.</p>
<div class="leftcol">
<h3>More data</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rightcol">
<h3>Some data</h3>
<p><a href="http://tenderapp.com">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer">
this is my footer
</div>
</body>
</html>We should see:
Once the dummy content is in there, we can properly style our main content divs. The left and right col divs both get a width of 470px, had we wanted to make this content area 3 divs instead of two, we could have set them to 300px each.
<!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" lang="en">
<head>
<title>960.gs Demo</title>
<style>
body {
margin: 0;
text-align: left;
padding: 0;
font: normal 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #FFF;
color: #333;
}
#header {
background-color:#333;
}
#header-inner {
margin: 0 auto;
width: 940px;
height: 30px;
padding: 10px 20px;
background-color:#333;
color:#FFF;
}
#headline {
background: #FFF;
}
#main {
background-color: #FFF;
}
#main-inner {
margin: 0 auto;
width: 940px;
height: 450px;
background-color: #FFF;
}
div.leftcol {
width: 470px;
float: left;
}
div.rightcol {
width: 470px;
float: right;
}
</style>
</head>
<body>
<div id="header">
<div id="header-inner">
this is my header content
</div>
</div>
<div id="main">
<div id="main-inner">
<p class="lead">Let's talk about our site a little bit.</p>
<div class="leftcol">
<h3>More data</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rightcol">
<h3>Some data</h3>
<p><a href="http://tenderapp.com">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="footer">
this is my footer
</div>
</body>
</html>
And finally, our footer, we need to style it properly so it takes it’s correct position on the page:
<!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" lang="en">
<head>
<title>960.gs Demo</title>
<style>
body {
margin: 0;
text-align: left;
padding: 0;
font: normal 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #FFF;
color: #333;
}
#header {
background-color: #333;
}
#header-inner {
margin: 0 auto;
width: 940px;
height: 30px;
padding: 10px 20px;
background-color: #333;
color:#FFF;
}
#headline {
background: #FFF;
}
#main {
background-color: #FFF;
}
#main-inner {
margin: 0 auto;
width: 940px;
height: 450px;
background-color: #FFF;
}
div.leftcol {
width: 470px;
float: left;
}
div.rightcol {
width: 470px;
float: right;
}
#footer {
border-top: 1px solid #dbdbdb;
}
#footer-inner {
font-size: 12px;
margin: 0 auto;
width: 940px;
height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="header-inner">
this is my header content
</div>
</div>
<div id="main">
<div id="main-inner">
<p class="lead">Let's talk about our site a little bit.</p>
<div class="leftcol">
<h3>More data</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rightcol">
<h3>Some data</h3>
<p><a href="http://tenderapp.com">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="footer">
<div id="footer-inner">
this is my footer
</div>
</div>
</body>
</html>And our final result is:
And that’s it. I hope that clearly demonstrates how easy it is to layout your pages. Please post a comment if you have any modifications to suggest or questions about the above code.
