How to Do It - Page 3

You only need one tag to solve all your positioning woes. Although you could use almost any tag, the DIV tag serves the purpose nicely, as it adds no formatting of its own, and it can contain any and all elements. As with any type of styling, positioning can be specified as an inline style (within an individual element) or as a document-wide style (within the HEAD section). The most powerful way, however, is to define positioning classes in an external style sheet, which requires three steps:

1. Create a style sheet, and link one or more HTML documents to it (by using the LINK tag within the HEAD section).
2. In your style sheet, create a class that defines a position on the page.
3. In your HTML document, create a division (a DIV element) which refers to that class. Include in this division whatever elements you wish to place in that position.

For example, include this in your style sheet:

.leftcolumn {
position:       absolute;
width:          200;
top:            0px;
left:           0px;
background-color: #00FFFF;
}

Now you've created a class called leftcolumn. In your HTML document, create a DIV that calls the leftcolumn class, and you have a red box 200 pixels wide in the top left corner of the page. Fill up the box with whatever you want to be in the left column, like so:

<DIV class="leftcolumn">
Contents of left column.
</DIV>

You can do the same thing using IDs instead of CLASSes if you prefer.

Of course, a left column is seldom encountered without a right column, so you'll need to define a rightcolumn class as well. For best results, everything on the page should be in a division that has its position specified in a style sheet.

We can create a right column class like so:

.rightcolumn {
position:       absolute;
top:            0px;
left:           200px;
}

Remember that the left column is 200 pixels wide. Since the right column begins 200 pixels from the left edge, it should be right next to the left column, where it belongs. Simple, eh? A bit too simple, in fact. The layout we've just created serves as a good, clear example of how positioning with CSS works, but in the real world, your style sheets will need to be much more complex to get the results you want. Some other things you need to consider are:

• Borders, padding, etc. Just like table cells, divisions can have borders, background colors, padding and other properties.
• Stretchability. Like tables, divisions need to be able to stretch to accommodate different user window sizes. You can specify dimensions in percentage values as well as in pixels. Another handy trick is leaving a division's size unspecified, and using margins to position the contents of the division.
• Inheritance. That pesky inheritance can upset your best-laid positioning plans, especially if you're using relative positioning.
• Browser bugs. Remember how we covered our posteriors at the beginning of the article by mentioning certain "notable exceptions" to current browsers' support for CSS? Netscape 6 and Opera 5 both have a couple of little "issues," but fortunately there are workarounds that can solve the problems.

The important point to remember is that if you're going to use CSS for positioning, you have to get it right. A tiny error can cause a page to appear as a jumbled mess, although perhaps only in certain browsers. To get the most out of this powerful set of tools, you need to know all the positioning properties of CSS backwards and forwards. Peruse some of the CSS tutorials you'll find here at the WDVL, and keep a good reference at your elbow as you code (such as Eric Meyer's Style Sheet Reference Guide).

Or, if you're not the studious type, you can simply copy what someone else has done. There are two excellent sites that offer prefab CSS layouts that you can freely copy and modify for your own use. Eric Costello's excellent site glish.com features several great layouts including 2-column and 3-column layouts both fluid (stretchable columns) and static (fixed-width columns) and one that is particularly amazing, a nested float (which allows you to wrap text around a division). The Layout Reservoir from Bluerobot.com is another similar resource.

I strongly recommend glish.com to anyone dabbling in CSS positioning. Their layouts are the product of collaboration among several leading CSS geeks, who have tested their layouts in lots of browsers. They've figured out exactly how padding and margins work, something that has baffled many a designer. They also have clever workarounds for the browser-specific problems we mentioned above. Glish also has lots of links to CSS tutorials and other resources.

Just one tiny catch... - Page 2
Toss out your Tables! CSS is the scene!
Overlapping Layers - Page 4