This example shows how to use YUI Grids CSS to create a two-column layout with a narrow 240px column on the right.
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-t5
class, which makes the narrow non-main column 240px and on the right side.
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-t5
which is a right-aligned narrow column of 240px.
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings