Дивная верстка. Добавляем колонки
это продолжение статьи Дивная верстка (блок по центру)
изменим наш HTML код до следующего вида:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body, html {width: 100%; height: 100%; margin:0px; padding:0px;}
.main { width: 1000px; position: absolute; left: 50%; margin-left: −500px; height: 100%}
.left {background: green;
float: left;
width: 240px;
height: 100%;
}
.right {background: blue;
float:right;
width: 760px;
height: 100%;
}
</style>
</HEAD>
<BODY>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</BODY>
</HTML>
Смотрим результат:
Основной блок в котором находятся две колонки был получен из предыдущей статьи, и в нем теперь расположены 2 колонки, разного цвета. В данной статье будет рассматриваться статический вариант дизайна, т.е. фиксированной ширины.
Так как у нас ширина сайта 1000 пикселей, мы четко можем задать размеры нашим колонкам, допустим, левая колонка у нас будет шириной 240 пикселей, ширина как уже всем известно 
задается параметром
width:240px
далее, т.к. див это блочный тип тега, то скока бы мы не указывали его ширину, рядом лежащий любой блок (тег) будет назодится под ним, что бы этого не происходило, т.е. что бы наша колонка просто прилипла к левому краю, а остальне блоки были с ее правой стороны (как это делается например в текстовых редакторах обтекание картинок текстом) мы задаем блоку параметр:
float: left — говорим блоку — прилипаем слева
далее указываем высоту блока, учтите, когда вы указываете высоту в процентах, автоматически браузером определяется высота в пикселях, но только при наличии высоты у родительского объекта, т.е. самого блока класса main
у нас получилось:
.left {background: green;
float: left;
width: 240px;
height: 100%;
}
цвет фона — только для тестирования
для того что бы создать правую колонку, делаем все с точностью как и с левой колонкой, только приклеиваем ее уже к правому краю, это делается параметром:
float: right
получили описание блока:
.right {background: blue;
float:right;
width: 760px;
height: 100%;
}
вот и все
теперь у нас получились две колонки, которые отражены на скриншоте в начале статьи
у флоатов (float) есть такая «проблема», которая работает как магнит, вот мы описали float: left и float: right но теперь, что бы мы не добавили ниже этих блоков, например «подвал» (footer) он у нас не отобразится должным образом, для этого есть параметр:
clear:both — я обычно сразу со всех сторон очищаю «магнитизм», но в принципе можно указывать с какой стороны его убрать left|right
для того что бы убрать магнитизм у блоков выше, используйте код:
CSS:
.clear {clear:both}
HTML:
<div class="main"> <div class="left">left</div> <div class="right">right</div> <div class="clear"></div> </div>
т.е. мы добавляем линию 0 высоты дива классом «clear», которая очищает магнитизм, после чего мы с легкостью может добавить подвал
Хорошая статья, а с чего всё таки лучше начать новичку??