Дивная верстка. Часть 1.

Начнем с наиболее часто используемого шаблона:
шапка, левая колонка, центр, правая колонка, подвал.

<style>
/* Объявляем стили наших выше упомянутых пяти слоёв */
#my_header {                /* Слой шапки */
    width:100%;             /* ширина */
    background-color:#FF9;  /* заливка */
}
#my_left_panel{             /* Слой левой колонки */
    float:left;             /* левый поплавок */
    width:20%;              /* ширина */
    background-color:#9FF;  /* заливка */
    overflow:hidden;        /* при сжатии скрывать */
}
#my_right_panel {           /* Слой правой колонки */
    float:left;             /* левый поплавок */
    width:20%;              /* ширина */
    background-color:#9FF;  /* заливка */
    overflow:hidden;        /* при сжатии скрывать */
}
#my_center_panel {          /* Слой центральной колонки */
    float:left;             /* левый поплавок */
    width:60%;              /* ширина */
    background-color:#F9F;  /* заливка */
    overflow:hidden;        /* при сжатии скрывать  */
}
#my_footer {                /* Слой подвала */
    clear:left;             /* сбросить поплавки */
    width:100%;             /* ширина */
    background-color:#FF9;  /* заливка */
}
</style>

Пояснения:
float:left – прижмет наш слой влево.
overflow:hidden – нужен для того чтобы наши слои не прыгали вниз при сжатии страницы.
clear:left – сброс поплавков, т.е. слой будет прижиматься к краю родительского объекта, либо это body страницы, либо родительский слой.
В браузере IE существует особенность связанная с тем, что шириной слоя он считает чистую ширину слоя без учета отступов и бордюра.
Если вы сейчас попробуете скопировав данный стиль и код себе и открыть полученную страницу в браузере IE,
то вероятнее всего правая колонка спрыгнет вниз, не поместившись в линию с левой и центральной колонкой.
Чтобы этого избежать можно вставить в стиль следующий элемент, свойства которого будут применены ко всем элементам страницы включая body:

 * {
   padding:0;               /* внутренний отступ */
   margin:0;                /* внешний отступ */
   }

Или иначе, как в примере на этой странице данные слои находятся внутри другого слоя, к которому и применено свойство обнуления отступов:

<style>
#my_demo_block * {
   padding:0;               /* внутренний отступ */
   margin:0;                /* внешний отступ */
   }
#my_inner_demo_block {
    width:80%;
}
</style>
<div id=my_demo_block align="center">
    <div id=my_inner_demo_block align="left">
        <div id=my_header>Шапка</div>
        <div id=my_left_panel>Левая колонка</div>
        <div id=my_center_panel>Центральная колонка</div>
        <div id=my_left_panel>Правая колонка</div>
        <div id=my_footer>Подвал</div>
    </div>
</div>

Предыдущий пример представляет собой резиновый шаблон, т.е. все колонки имеют процентную ширину.
Следующий пример реализует возможность использования фиксированной ширины боковой колонки
в сочетании с резиновой шириной контент – колонки. Этого эффекта несложно добится используя
абсолютное позиционирование.

<style>
#my_header_2 {              /* Header */
    width:100%;
    background-color:#FF9;
}
#my_left_panel_2 {          /* Left Panel */
    position:absolute;      /* абсолютное позиционирование */
    left:0;                 /* отступ слева ноль */
    width:100px;            /* ширина 100 пикс. */
    background-color:#9FF;
    z-index:103;            /* 103-й слой */
}
#my_right_panel_2 {          /* Right Panel */
    position:absolute;
    right:0;
    width:100px;
    background-color:#9FF;
    z-index:102;            /* 102-й слой */
}
#my_center_panel_2 {        /* Center Panel */
    border-left:100px solid #CCC;   /* бордюр цент. блока слева */
    border-right:100px solid #CCC;  /* бордюр цент. блока справа */
    position:relative;      /* относительное позиционирование */
    z-index:101;            /* 101-й слой */
    background-color:#F9F;
}
#my_footer_2 {              /* Footer */
    width:100%;
    background-color:#FF9;
}
#my_demo_block_2 * {
   padding:0;               /* внутренний отступ */
   margin:0;                /* внешний отступ */
}
#my_inner_demo_block_2 {
    position:relative;
    width:80%;
}
</style>
<div id=my_demo_block_2 align="center">
    <div id=my_inner_demo_block_2 align="left">
        <div id=my_header_2>Шапка</div>
        <div id=my_left_panel_2>Левая колонка</div>
        <div id=my_right_panel_2>Правая колонка</div>
        <div id=my_center_panel_2>Центральная колонка<br />вторая строка</div>
        <div id=my_footer_2>Подвал</div>
    </div>
</div>

Работоспособность данных примеров проверена в IE 6, MF 2, Opera 9.2, Opera 7.2