CSS Layout Using YUI
Typical Web pages use one or more ways to lay out pages. The most common means are table-based layout and CSS layout.
CSS layout means you use CSS styles to place major blocks of your page at certain locations. For example, the footer gets placed at the bottom of the page regardless of how the page is resized, and so on. CSS layout can also mean using CSS magic to convert bulleted list items into tabs or menu choices.
Table-based layout means you use HTML tables for placing everything. It works, and for older applications, was the only technology really available until browsers started to advance in support for CSS.
One thing you’ll hear over and over is that table-based layout is bad, bad, bad.
A CSS layout leads to less HTML in your pages, a cleaner design, and the HTML structure better matches the structure of the information.
So, I recommend: Use CSS layout for major blocks. Use CSS for styling. Try to use CSS for everything in your header, footer, and navigation blocks. Inside the main block, though, don’t worry about using tables. If you need to make things line up within the main content area, you need to use tables.
Using the reset-fonts-grids.css file, you specify major blocks in your HTML file using a combination of DIVs with IDs and styles (classes) on DIVs.
A good starting template follows. Just fill in the sections for your content.
<html> <head> <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> </head> <body> <div id="doc3" class="yui-t1"> <div id="hd"><!-- Header --></div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-g"><!-- MAIN CONTENT HERE --> </div> <div class="yui-g"><!-- ADDITIONAL CONTENT HERE --> </div> </div> </div> <div class="yui-b"><!-- Navigation area --></div> </div> <div id="ft"><!-- Footer -->
doc3 ID specifies a document using 100 percent of the page width. The class
yui-t1 specifies a two column layout, with a 160px-wide navigation area on the left. Note that in this layout, the navigation area occurs after the main content of the page.
In the main area, each block of content appears one after another vertically. Each block should be in a DIV with a class of
YUI grids layout – describes using the reset-fonts-grids.css file that comes with the YUI toolkit.
Excerpted from my OPI Tech Talk on the Yucky Parts of Web Development.