Я что-то плохонепонял

Приветствую! Очень быстро и просто можно создать небольшой шаблончик для верстки макетов с левым и правым сайдбарами, шапкой и подвалом. Для некоторых начинающих веб-мастеров встречаются трудности на пути создания таких дизайнов, а на самом деле все проще простого.

Создаем 7 div`ов, называем и располагаем их в следующем порядке:

<div id="main">
<div class="header">
Верхушка
</div><!--class="header" -->

<div id="content-columns">
<div class="leftcolumn">
Левая колонка
</div><!--class="leftcolumn" -->

<div class="content">
Центральная колонка
</div><!--class="content" -->

<div class="rightcolumn">
Правая колонка
</div><!--class="rightcolumn" -->

</div><!--id="content-columns" -->

<div class="footer">
Подвал
</div>
</div><!--id="main" -->

Ну и как обычно создаем файл стилей или записываем в странице (не рекомендуется) и начинаем разбирать код css:

body {
min-width: 800px;}

Определяет минимальную ширину монитора до которой дивы будут сужаться, если ширина монитора или ширина окна браузера будет меньше 800 пикселей, то внизу появится полоса прокрутки.

* html body {
width:expression (document.documentElement.clientWidth < 800 ? «800px» : «auto»);}

По поводу этой записи расскажу лишь то, что она необходима для корректной интерпретации страницы в IE, что определяет кроссбраузерность верстки. Боюсь ошибиться, поэтому не буду рассказывать больше ничего.

#main {
width: 100%;}

Общий див, имеет ширину в 100% и всегда растягивается на всю ширину окна. В нем находятся все остальные дивы.

.header {
width: 100%;
height: 50px;
background: #36f;}

Див шапки сайта с шириной в 100% и высотой 50 пикселей, вон произвольный для тестирования шаблона.

#content-columns {
margin: 0 150px 0 150px;}

В этом контейнере размещаются три колонки (два сайдбара и для основного контента). Теперь внимательно читаем и вникаем. У данного дива назначены отступы с четырех сторон 0 150px 0 150px, первая цифра определяет отступ сверху, вторая отступ српава, третья снизу и четвертая слева. Замечу, что если стоит ноль, то «px» подставлять не надо. Итого мы имеем сверху и снизу отступы ноль, а слева и справа отступы по 150 пикселей для наших сайдбаров.

.content {
width: 100%;
float: left;
background: #ccc;}

правила для средней колонки. Ширина 100%, прижата к левой стороне, фон произвольный.

.leftcolumn {
width: 150px;
float: left;
margin-left: -150px;
display: inline; /* решает проблему в IE */
position: relative;}

Левый сайдбар с шириной 150 пикселей (вспомним отступы...), прижат к левой стороне и с отступом в минус 150 пикселей (минус для сдвига), предпоследняя строка для кросс-браузерности и послядняя строка задает позицию этого дива.

.rightcolumn {
width: 150px;
float: right;
margin-right: -150px;
display: inline; /* решает проблему в IE */
position: relative;}

Тоже самое для правого сайдбара, только прижимаем его к правой стороне (float: right;)

.footer {
width: 100%;
height: 50px;
clear: both;
background: #006;}

Правила для подвала. Ширина 100%, высота 50 пикселей, третей строкой выполняем «очистку потока» от правил прижимания к левой и правой стороне сайдбаров и в конце фон произвольный.

Ну вот и готов набросок для вашего будущего дизайна. Теперь все по порядку: работаем над шапкой, потом сайдбары и подвал. Если есть необходимость, можно под шапкой вставить горизонтальное меню в виде кнопочек.

А после того ка Вы научитесь делать сайты, сделаете себе несколько штук и можно копить деньги на квартиру. Вот тут можно найти различные агентства недвижимости в Москве. Любая информация о недвижимости всегда полезна и актуальна.

Кстати я задумал купить себе автомобиль. Ну и конечно же заглянул в 2010 каталог автомобилей. Столько много разных марок, что аж глаза разбегаются. Зато есть из чего выбирать. Надеюсь, что все получится удачно.