Three column CSS layout with Blueprint framework

Posted by Fahad Ibnay Heylaal on Sep 10th 2008, 17:29 - in CSS

In one of my previous articles, I mentioned about Blueprint CSS framework. Now I am going to show you how to use it for designing your web layouts.

Before we begin, I need to tell you about its grid. Blueprint's default width for all layout is set to 950px consisting of 24 columns (width units). These columns can be controlled directly by your HTML code (divs with class attributes). You will not be required to touch your CSS files for that.

Layout (three column)
In this tutorial, we will follow a three-column layout with a header and a footer.
three-column-web-layout

Create a new HTML document with this code:

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3. "http://www.w3.org/TR/html4/strict.dtd">
  4.  
  5. <html lang="en">
  6.   <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8.     <title>frinity.blogspot.com</title>
  9.     <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
  10.   </head>
  11.   <body>
  12.  
  13.     <div class="container">
  14.       <h1>Header</h1>
  15.       <hr />
  16.  
  17.       <div>
  18.         First column here
  19.       </div>
  20.  
  21.       <div>
  22.         Second column (main content)
  23.       </div>
  24.  
  25.       <div>
  26.         Third column
  27.       </div>
  28.  
  29.       <hr />
  30.       <div>Footer</div>
  31.  
  32.     </div>
  33.  
  34.   </body>
  35. </html>

Now its time for adding some 'class' attributes to your HTML elements for creating the columns. Notice that I said the whole layout consists of 24 columns (or 24 width units). For example, you may want the first column to be 6 units wide, the middle column 12 units, and the third and last column to be 6 units. Therefore, the three columns equal to (6 + 12 + 6) = 24 units.

Notice the code in 'class' attributes

  1. <div class="span-6">
  2.   First column here
  3. </div>
  4.  
  5. <div class="span-12">
  6.   Second column (main content)
  7. </div>
  8.  
  9. <div class="span-6 last">
  10.   Third column
  11. </div>

Dont forget to add 'last' in the class attribute of your last column. This is important.

Save your HTML file, and open it in a browser. Your layout is ready!

Share: