docs/partials/cssgrids-fluid-source.mustache

	cssgrids-fluid-source.mustache revision 8817197b3e98d94ab2ade1f70820496f4d5e88c2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI 3.x: CSS Grids Units Example</title>
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/reset.css" type="text/css">
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/fonts.css" type="text/css">
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/grids.css" type="text/css">

<style>
/* everything below is custom styling to demonstrate how to create a page layout using yui grid units */

/* 3 column fluid layout (either side column is optional, just omit the layout padding) */
#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%;
}

/* arbitrary content styling */
#hd, #nav .content, #main .content, #extra .content, #ft {
    border: 5px solid #ccc;
    height: 400px;
}

#hd, #ft {
    height: 40px;
}
</style>

</head>
<body>
    <div id="hd">
        <h1>Fluid Layout Template</h1>
    </div>

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

        <div class="yui3-u" id="main">
            <div class="content"></div>
        </div>

        <div class="yui3-u" id="extra">
            <div class="content"></div>
        </div>
    </div>

    <div id="ft"></div>
</body>
</html>