cssgrids-fixed.mustache revision d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6
0N/A<div class="intro">
2362N/A <p>This example demonstrates how to create a fixed width page using YUI Grids.</p>
0N/A</div>
0N/A
0N/A<div class="example newwindow">
0N/A <a href="cssgrids-fixed-example.html" target="_blank" class="button">
0N/A View Example in New Window
0N/A </a>
0N/A</div>
0N/A
0N/A<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>
0N/A<h3>Basic Markup Structure</h3>
0N/A
0N/A```
0N/A<div class="yui3-g">
0N/A <div class="yui3-u-1-5"></div>
0N/A <div class="yui3-u-2-5"></div>
0N/A <div class="yui3-u-2-5"></div>
2362N/A</div>
2362N/A```
2362N/A
0N/A<h3>Adding Content</h3>
0N/A<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.
0N/AFor 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>
0N/A
0N/A```
0N/A<div class="yui3-g">
0N/A <div class="yui3-u-1-5">
0N/A <div class="content">
0N/A
0N/A </div>
0N/A </div>
0N/A <div class="yui3-u-2-5">
0N/A <div class="content">
0N/A
0N/A </div>
0N/A </div>
0N/A <div class="yui3-u-2-5">
0N/A <div class="content">
0N/A
0N/A </div>
0N/A </div>
0N/A</div>
0N/A```
0N/A
0N/A<h3>Fixing the Page Width</h3>
0N/A<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>
0N/A
0N/A```
0N/A<style>
0N/A#doc {
0N/A margin:auto; /* center in viewport */
0N/A width: 970px; /* fix page width */
0N/A}
0N/A</style>
0N/A```
0N/A
0N/A<h3>Adding Gutters and other Column Styling</h3>
0N/A<p>The <code>content</code> container is where margins between columns ("gutters"), padding, borders, and other content styling can be applied.</p>
0N/A
0N/A```
0N/A<style>
0N/A.yui3-g .content {
0N/A border: 2px solid #000;
0N/A margin-right:10px; /* "column" gutters */
0N/A padding: 1em;
0N/A}
0N/A</style>
0N/A```
0N/A