<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI3 CSS</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css&3.3.0/build/cssfonts/fonts-min.css&3.3.0/build/cssgrids/grids-min.css"> <style type="text/css"> body { margin: auto; /* center in viewport */ width: 1200px; } #hd h1 { font: bold 180% arial; padding: 1em; } #ft { background: #999; font:80% verdana; padding: 1em; text-align: center; } </style> </head> <body> <div> <div id="hd"> <h1>Page Layout Example</h1> </div> <div class="yui3-g"> <div class="yui3-u-1-2" style="background-color:#333;min-height:350px;"><!-- header --></div> <div class="yui3-u-1-2"> <div class="yui3-g" style="background-color:#633;min-height:150px;"> <div class="yui3-u-3-4" style="background-color:#fff;min-height:50px;"> <div class="yui3-g" style="background-color:#633;min-height:150px;"> <div class="yui3-u-1-4" style="background-color:#093;min-height:100px;">1</div> <div class="yui3-u-1-4" style="background-color:#F6F;min-height:100px;">2</div> <div class="yui3-u-1-4" style="background-color:#093;min-height:100px;">3</div> <div class="yui3-u-1-4" style="background-color:#F6F;min-height:100px;">4</div> </div> </div> <div class="yui3-u-1-4" style="background-color:#F6F;min-height:100px;">5</div> </div> </div> </div> <div id="ft"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu arcu, volutpat vel volutpat vel, varius ac odio.</p> </div> </div> </body> </html>