Example: Fluid Page Template

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 IDs to our "columns" to deliver the sizing. The actual IDs 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>