Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

15: LAYOUT > A GRID-BASED LAYOUT USING 960.GS

A GRID-BASED LAYOUT USING 960.GS

Let's take a look at an HTML page and how it has been marked up to use the 960.gs grid system.

You can see that we include the CSS for the grid using the <link> element inside the <head> of the page.

The styles we are writing ourselves are shown on the right hand page.

The 960_12_col.css stylesheet contains all of the rules we need to control the grid layout. The HTML uses the class names:

container_12 to act as a container for the whole page and indicate that we are using a 12 column grid

clearfix to ensure that browsers know the height of the containing box, because it only contains floated elements (this addresses the issue you met on pages 371-372)

grid_12 to create a block that is twelve columns wide

grid_4 to create a block that is four columns wide


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint