This example sows how to use YUI Grids CSS to create a two-column layout with a narrow 300px column on the left.
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.
Use any of Grids' six available Preset Templates by following these three simple steps. First, define two content blocks (.yui-b) in your markup document.
The second step is to choose one of the two blocks, or columns, to be the wider "main" column. Indicate your choice by wrapping that
div.yui-b node in a
div#yui-main node. Don't worry about source-order because your main block can come first or second in the source without impacting the final visual layout.
The final step is to decide which Preset Template you wish to use, and to apply the corresponding class to a containing
div. In this case I've chosen the
.yui-t3 class, which makes the narrow non-main column 300px and on the left side.
Here's a list of the available Preset Template classes:
div.yui-t1creates a narrow column on the left with 160px width.
div.yui-t2creates a narrow column on the left with 180px width.
div.yui-t3creates a narrow column on the left with 300px width.
div.yui-t4creates a narrow column on the right with 180px width.
div.yui-t5creates a narrow column on the right with 240px width.
div.yui-t6creates a narrow column on the right with 300px width.
Open this example in a new window to see the
div.yui-t3 which is a left-aligned narrow column of 300px.