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