Welcome to the seventh and final installment of a series covering fundamental design principles as applied to web layout creation. This series uses numerous code samples to show you how to implement such design concepts as the Golden Ratio and the Rule of Thirds to construct several professional-looking web page designs that will be visually appealing to your visitors.
Using a Background Grid to Assist Web Page Layout - Displaying the background grid on the web page (Page 3 of 4 )
Before I start showing you how to transform the grid image created in the previous section into a visual guide that will be displayed on the web page, it’s fair to clarify that this approach isn’t mine. The idea of using an image as a background grid was originally conceived by Khoi Vinh and you may want to take a look at his site here (http://www.subtraction.com/2004/12/31/grid-computi) to see a nice usage of his grid.
Having said that, it’s time to code the corresponding CSS styles that will be responsible not only for creating a fixed three-column web page layout, but for assigning the grid image that you saw previously to the page’s <body> element.
These CSS styles will be defined in the following way:
body{
padding: 0;
margin: 0;
background: #eee url(grid.gif) center top repeat-y;
}
#container{
width: 900px;
margin: 0 auto;
}
#header{
height: 100px;
padding: 0 10px 0 10px;
}
#sidebar{
float: left;
width: 280px;
padding: 0 10px 0 10px;
}
#extrabar{
float: right;
width: 280px;
padding: 0 10px 0 10px;
}
#content{
margin-left: 300px;
margin-right: 300px;
height: 302px;
padding: 0 10px 0 10px;
}
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
}
h1,h2,p{
margin: 0;
}
As you can see, the set of CSS styles defined above are tasked with building a simple web page layout which is composed of three primary columns, identified as “sidebar,” “content” and “extrabar” respectively. Each of these columns has been assigned a width of 300px, aligning the whole design with the Rule Of Thirds. However, the most relevant thing to note here is the following rule:
body{
padding: 0;
margin: 0;
background: #eee url(grid.gif) center top repeat-y;
}
Despite its ease, this rule is truly powerful; it tells the browser to display the grid image created in the previous segment across the whole web page, as a background grid. Now it’s much easier to align elements on the page, since the background image acts like some of the grids available in any graphic editing program.
Pretty nice, right? At this point, you hopefully understand how to use a simple GIF or PNG image as a helpful background grid, which can be displayed on a web document for aligning purposes. However, the CSS styles coded above would be incomplete if they weren't linked to the document’s markup.
Therefore, in the section to come I’ll be performing this task, so you can see more clearly how the background grid can be utilized for placing different elements within the web page in perfect harmony.
Now, click on the link below and read the following segment.
Style Sheets 
CSS Combinators: Using General Siblings
