comt: src/cm/media/js/lib/yui/yui_3.10.3/docs/cssgrids/cssgrids-fluid-example.html@89ef5ed3c48b


<!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 Fluid Example</title>
    <link rel="stylesheet" href="../../build/cssreset/cssreset.css" type="text/css">
    <link rel="stylesheet" href="../../build/cssfonts/cssfonts.css" type="text/css">
    <link rel="stylesheet" href="../../build/cssgrids/cssgrids.css" type="text/css">
    <script src="../../build/yui/yui-min.js"></script>
<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>


<script>
YUI.Env.Tests = {
    examples: [],
    project: '../assets',
    assets: '../assets/cssgrids',
    name: 'cssgrids-fluid',
    title: 'Fluid Width Page Layout',
    newWindow: '',
    auto:  false 
};
YUI.Env.Tests.examples.push('cssgrids-units');
YUI.Env.Tests.examples.push('cssgrids-fixed');
YUI.Env.Tests.examples.push('cssgrids-fluid');
YUI.Env.Tests.examples.push('cssgrids-align');
YUI.Env.Tests.examples.push('cssgrids-magazine');
YUI.Env.Tests.examples.push('menunav-leftnav');
YUI.Env.Tests.examples.push('node-menunav-2');
YUI.Env.Tests.examples.push('node-menunav-3');
YUI.Env.Tests.examples.push('node-menunav-4');
YUI.Env.Tests.examples.push('node-menunav-5');
YUI.Env.Tests.examples.push('node-menunav-6');
YUI.Env.Tests.examples.push('node-menunav-7');

</script>
<script src="../assets/yui/test-runner.js"></script>
author	gibus
	Tue, 16 Jul 2013 14:29:46 +0200
changeset 525	89ef5ed3c48b
permissions	-rw-r--r--