#

# Example: Fluid Page Template

Creating a fluid layout with YUI Grids requires some custom sizing to achieve the fluid effect.

View Example in New Window

A fluid grid starts with the basic markup structure of a `yui3-g` grid and some `yui3-u` units.

### Basic Markup Structure

    <div class="yui3-g">
        <div class="yui3-u"></div>
        <div class="yui3-u"></div>
        <div class="yui3-u"></div>
    </div>

Creating a fluid layout requires manually fixing the sizes and using a combination of `padding` and negative margins, so we can stick with the basic `yui3-u` unit. Rather than extending the `yui3-u` unit directly, we will add some unique `ID`s to our "columns" to deliver the sizing. The actual `ID`s are entirely up to you, but by convention should describe your content rather than its presentation or layout. We will apply an ID to the `yui3-g` container as well, as this is where the padding will be added to create space for the side columns.

    <div class="yui3-g" id="layout">
        <div class="yui3-u" id="nav"></div>
        <div class="yui3-u" id="main"></div>
        <div class="yui3-u" id="extra"></div>
    </div>

We also need to add our custom CSS for the fluid layout. The container for the units is padded to match the widths of each side column, each side column gets a fixed width and a negative margin that matches the fixed width. The center column is set to 100% width, filling the container minus its padding.

    <style>
    #layout {
        padding-left:300px; /* "left col" width */
        padding-right:150px; /* "right col" width */
    }

    #nav {
        margin-left:-300px; /* "left col" width */
        width:300px;
    }

    #extra {
        width:150px;
        margin-right:-150px; /* "right col" width */
    }

    #main {
        width:100%;
    }

    </style>