#

# Example: Fixed Page Template

This example demonstrates how to create a fixed width page using YUI Grids.

View Example in New Window

A fixed grid starts with the basic markup structure of a `yui3-g` grid and some `yui3-u` units. For this example, we will create a 970px page and use `yui-u-1-5` to make the left column 194px, and `yui-2-5` to split the other 2 into 388px columns each.

### Basic Markup Structure

    <div class="yui3-g">
        <div class="yui3-u-1-5"></div>
        <div class="yui3-u-2-5"></div>
        <div class="yui3-u-2-5"></div>
    </div>

### Adding Content

As with all `yui3-u-*` units, to avoid layout complications, all column styling should be applied to a container within the unit rather than on the unit itself. For this demo we will add a container with the class `content` to contain our content, but you can feel free to call this whatever you like.

    <div class="yui3-g">
        <div class="yui3-u-1-5">
            <div class="content">

            </div>
        </div>
        <div class="yui3-u-2-5">
            <div class="content">

            </div>
        </div>
        <div class="yui3-u-2-5">
            <div class="content">

            </div>
        </div>
    </div>

### Fixing the Page Width

To fix the size of the page, simply apply a width to the outermost page container. For this example, we will apply the `ID` `doc` to the `body` element and apply the width there. To center the layout, set the margin to `auto`.

    <style>
    #doc {
        margin:auto; /* center in viewport */
        width: 970px; /* fix page width */
    }
    </style>

### Adding Gutters and other Column Styling

The `content` container is where margins between columns ("gutters"), padding, borders, and other content styling can be applied.

    <style>
    .yui3-g .content {
        border: 2px solid #000;
        margin-right:10px; /* "column" gutters */
        padding: 1em;
    }
    </style>