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.
Table layout leads to a more complex page structure, as you have tables within tables within tables. This can impact some JavaScript toolkits like Dojo (especially on the Safari browser) and can also make it harder to maintain your pages. One missing close tag and your whole page structure breaks. And, it can be hard to find the offending error in the page.
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.
To get started with CSS layout, I recommend using a CSS file called reset-fonts-grids.css from the Yahoo (YUI) JavaScript toolkit. Even if you choose not to use the full YUI toolkit, this one CSS file provides a simple way to create a CSS-based layout for your Web pages.
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 -->The 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-g.
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.
-Eric Foster-Johnson