Using the Preset Templates in YUI Grids for common two-column layouts

YUI Grids CSS offers three ways to control your page layout. Preset Templates are two-column layouts of common dimensions; they have one narrow column with a fixed width and second column that takes up the remainder of the space offered by the overall page width. You can use these Preset Templates by themselves, or combine them with Grids' page width control and/or Nesting Grids.

To use Grids' Preset Templates define two blocks (.yui-b) in your document.

Next, choose one of the two columns to be the wider "main" content by wrapped that .yui-b in a div#yui-main node. Don't worry about source-order, your main block can come first or second in the source without impacting the final CSS page layout.

Next, choose which Preset Template you want to use, and apply that class to the containing div. In this case I've chosen the .yui-t4 class, which puts the narrow column on the right with 180px width.

Here's a list of the available Preset Template classes:

• div.yui-t1 creates a narrow column on the left with 160px width.
• div.yui-t2 creates a narrow column on the left with 180px width.
• div.yui-t3 creates a narrow column on the left with 300px width.
• div.yui-t4 creates a narrow column on the right with 180px width.
• div.yui-t5 creates a narrow column on the right with 240px width.
• div.yui-t6 creates a narrow column on the right with 300px width.

Open this example in a new window to see the div.yui-t4 which is a right-aligned narrow column of 180px.