## YUI Grid Example

- YUI Grid Examples
- Special Nesting Grid E: 3/4 - 1/4

Grid: 4 areas:

- header
- body - A - 3/4
- body B - 1/4
- footer

Note the use of "reset-fonts-grids.css", which gives you a blank slate for styles (overrides UA stylsheet for font sizes, margins, padding, etc.)

<html> <head> <title>Grids CSS Example - YUI Grids - Special Nesting Grid E: 3/4 - 1/4</title> <link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css"> </head> <body> <!-- the id on the containing div determines the page width. --> <!-- #doc = 750px; #doc2 = 950px; #doc3 = 100%; #doc4 = 974px --> <div id="doc"> <div id="hd"> <p>Header - Lorem ipsum dolor sit amet...</p> </div> <div id="bd"> <!-- Use Standard Nesting Grids and Special Nesting Grids to subdivid regions of your layout. --> <!-- Special Nesting Grid E has two children, the first is 3/4, the second is 1/4 --> <div class="yui-ge"> <!-- the first child of a Grid needs the "first" class --> <div class="yui-u first"> <p>A - Lorem ipsum dolor sit amet, ...</p> </div> <div class="yui-u"> <p>B - Lorem ipsum dolor sit amet, ...</p> </div> </div> </div> <div id="ft"> <p>Footer - Lorem ipsum dolor sit amet, ...</p> </div> </div> </body> </html>