YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Grids CSS: Preset Template 3, 300px left

# Grids CSS: Preset Template 3, 300px left

This example sows how to use YUI Grids CSS to create a two-column layout with a narrow 300px column on the left.

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.

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.

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

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.

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

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.

<body> <div class="yui-t3"> <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-t3` which is a left-aligned narrow column of 300px.

## Configuration for This Example

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.

### 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
- Split Pane resizing with Grids CSS (included with examples for Resize Utility)
- Using a Layout with Grids CSS (included with examples for Layout Manager)
- 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)
- Using ARIA Landmark Roles With Grids
- 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)
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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