<div class="intro">
    <p>This example demonstrates how to create a fixed width page using YUI Grids.</p>
</div>

<div class="example newwindow">
    <a href="cssgrids-fixed-example.html" target="_blank" class="button">
        View Example in New Window
    </a>
</div>

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

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

<h3>Adding Content</h3>
<p>As with all <code>yui3-u-*</code> 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 <code>content</code> to contain our content, but you can feel free to call this whatever you like.</p>

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

<h3>Fixing the Page Width</h3>
<p>To fix the size of the page, simply apply a width to the outermost page container.  For this example, we will apply the <code>ID</code> <code>doc</code> to the <code>body</code> element and apply the width there.  To center the layout, set the margin to <code>auto</code>.</p>

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

<h3>Adding Gutters and other Column Styling</h3>
<p>The <code>content</code> container is where margins between columns ("gutters"), padding, borders, and other content styling can be applied.</p>

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