QUICK LINKS

POSITIONING

Instead of trying to replicate a perfectly good guide that is already out there, I will instead direct you to this site to take a look at positioning in css.

After taking a look at those ten steps, the following code, taken from this page itself, should make sense in how it aligns and positions each element on the page.

#page {
      background:#000;
      position:relative;
      width:100%;
      }

#topimage{
      background:#000;
      position:absolute;
      top:0px;
      left:265px;
      width:522px;
      height:168px;
      }

#leftnav {
      background:#000;
      position:absolute;
      top:118px;
      left:50px;
      width:200px;
      }

#content {
      background:#000;
      position:absolute;
      top:188px;
      left:275px;
      width:500px;
      font-family:arial, helvetica, sans-serif;
      font-size:13px;
      }

#quickref {
      background:#000;
      position:absolute;
      top:196px;
      left:850px;
      width:200px;
      font-family:arial, helvetica, sans-serif;
      font-size:12px;
      }


This is just one example of how those ten steps can be put to use. You must always take into consideration the numberless sizes and varieties of browers that users will make us of, and accomodate as much as possible.

Quick Reference

A better guide
In 10 steps at this site