YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Grids CSS: Page Width = 100%

# Grids CSS: Page Width = 100%

This example shows how to use YUI Grids CSS to create a layout that uses 100% of the viewport's width.

View example in new window.

## Setting Page Width with YUI Grids

YUI Grids CSS offers three ways to control your page layout. These examples show how to control the page width, one of the three types of control. You can use Grids to just set page width, or combine this feature with Grids' Preset Templates and/or Nesting Grids.

YUI Grids sets the page width on a `div` that wraps the entire page. By setting the `id` of the `div` you can choose your page width. Here are the included options:

- `div#doc` creates a 750px page width.
- `div#doc2` creates a 950px page width.
- `div#doc3` creates a 100% page width. (Note that the 100% page width also sets 10px of left and right margin so that content had a bit of breathing room between it and the browser chrome.)
- `div#doc4` creates a 974px page width, and is a new addition to Grids in YUI version 2.3.0.

This example showcases the `div#doc3` 100% page width.

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