Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Grids CSS: Preset Template 5, 240px right

# Grids CSS: Preset Template 5, 240px right

This example shows how to use YUI Grids CSS to create a two-column layout with a narrow 240px column on the right.

View example in new window.

## 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.

<body> <div> <div class="yui-b">One of the blocks. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> <div class="yui-b">The other block. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> </div> </body>

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.

<body> <div> <div id="yui-main"> <div class="yui-b">One of the blocks. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> </div> <div class="yui-b">The other block. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> </div> </body>

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-t5` class, which puts the narrow column on the right with 240px width.

<body> <div class="yui-t5"> <div id="yui-main"> <div class="yui-b">One of the blocks. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> </div> <div class="yui-b">The other block. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> </div> </body>

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.

### Grids CSS Examples:

- Page Width = 750px
- Page Width = 950px
- Page Width = 974px
- Page Width = 100%
- Custom Page Width
- Preset Template 1, 160px left
- Preset Template 2, 180px left
- Preset Template 3, 300px left
- Preset Template 4, 180px right
- Preset Template 5, 240px right
- Preset Template 6, 300px right
- Standard Nesting Grid (1/2 - 1/2)
- Special Nesting Grid "B" (1/3, 1/3, 1/3)
- Special Nesting Grid "C" (2/3, 1/3)
- Special Nesting Grid "D" (1/3, 2/3)
- Special Nesting Grid "E" (3/4, 1/4)
- Special Nesting Grid "F" (1/4, 3/4)
- Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4)
- Website Left Nav With Submenus Built From Markup (included with examples for Menu Family)
- Website Left Nav With Submenus From JavaScript (included with examples for Menu Family)
- Website Top Nav With Submenus Built From Markup (included with examples for Menu Family)
- Website Top Nav With Submenus From JavaScript (included with examples for Menu Family)
- Website Left Nav Using Animation With Submenus Built From Markup (included with examples for Menu Family)
- Website Left Nav Using Animation With Submenus From JavaScript (included with examples for Menu Family)
- Website Top Nav Using Animation With Submenus Built From Markup (included with examples for Menu Family)
- Website Top Nav Using Animation With Submenus From JavaScript (included with examples for Menu Family)

### More Grids CSS Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings