cssgrids-fluid-source.mustache revision 8817197b3e98d94ab2ade1f70820496f4d5e88c2
0N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2362N/A<html>
0N/A<head>
0N/A <meta http-equiv="content-type" content="text/html; charset=utf-8">
0N/A <title>YUI 3.x: CSS Grids Units Example</title>
0N/A <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/reset.css" type="text/css">
2362N/A <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/fonts.css" type="text/css">
0N/A <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/grids.css" type="text/css">
2362N/A
0N/A<style>
0N/A/* everything below is custom styling to demonstrate how to create a page layout using yui grid units */
0N/A
0N/A/* 3 column fluid layout (either side column is optional, just omit the layout padding) */
0N/A#layout {
0N/A padding-left:300px; /* "left col" width */
0N/A padding-right:150px; /* "right col" width */
0N/A}
0N/A
0N/A#nav {
0N/A margin-left:-300px; /* "left col" width */
2362N/A width:300px;
2362N/A}
2362N/A
0N/A#extra {
0N/A width:150px;
0N/A margin-right:-150px; /* "right col" width */
0N/A}
0N/A
0N/A#main {
0N/A width:100%;
0N/A}
0N/A
0N/A/* arbitrary content styling */
0N/A#hd, #nav .content, #main .content, #extra .content, #ft {
0N/A border: 5px solid #ccc;
0N/A height: 400px;
0N/A}
0N/A
0N/A#hd, #ft {
0N/A height: 40px;
0N/A}
0N/A</style>
0N/A
0N/A</head>
0N/A<body>
0N/A <div id="hd">
0N/A <h1>Fluid Layout Template</h1>
0N/A </div>
0N/A
0N/A <div class="yui3-g" id="layout">
0N/A <div class="yui3-u" id="nav">
0N/A <div class="content"></div>
0N/A </div>
0N/A
0N/A <div class="yui3-u" id="main">
0N/A <div class="content"></div>
0N/A </div>
0N/A
0N/A <div class="yui3-u" id="extra">
0N/A <div class="content"></div>
0N/A </div>
0N/A </div>
0N/A
0N/A <div id="ft"></div>
0N/A</body>
0N/A</html>
0N/A