На сегодняшний день верстка существует только 2 способами – блочная DIV верстка и табличная. Какая из них лучше, вопрос спорный. Ранее, самой известной версткой была табличная, в которой использовался главный тег <table> и другие дочерние. Верстка таблицами помогала равномерно располагать элементы дизайна, по отношению друг к другу, но код страницы был очень большим, поэтому страница на мониторе отображалась только тогда, когда полностью прогружалась в браузере. В результате этого веб-страница имела плохую индексацию. Табличной же версткой пользуются только для создания табличных данных или для графических изображений.

Блочная – самая распространенная верстка с несколькими достоинствами:

• Не объемный код html
• Можно накладывать один ряд на другой, что облегчает расстановку элементов
• Хорошая индексация поисковыми системами
• Быстрая загрузка страницы
• Легкое создание видимых эффектов (списки, всплывающая подсказка, выпадающее окно)

В блочной верстке, основной тег <div>. Участки кода, которые отделены этим тегом, называются слоем. Все решения по стилю, вынесенные за границу кода html, в каскадные таблицы стилей, имеют доступ через классы или идентификаторы css.

Тег DIV и свойство float

Тег <div> — контейнер для контента, с присвоенным классом main, wrapper или container. В глубине контейнера есть блок с контентной частью, меню и сайдбаром. По системе, все ново-созданные блоки, начинаются с новой строчки. Свойство float можно использовать с любым элементом тега <div>, у которого не было точного позиционирования и используется для того, чтобы переместить направо или влево. Например, чтобы блок сайдбар находился с левой стороны, а блок контента с правой стороны, пользуются свойством float. Список значений — «left». «right» и «none».

Образец этих свойств на двух блоках:

<div style="float: left; background: #FFB300; width: 300px;">Блок для контента</div>
<div style="float: left; background: #C0C0C0; width: 200px;">Блок для сайдбара</div>

Получается такой результат:

Свойство clear

Необходимо помнить – float относится к блоку, где прописано это свойство и на тот элемент, который будет следовать за ним. Получается, если добавить к вышеуказанным блокам еще один блок и не указать для него никаких свойств, то его расположение будет не с новой строчки, а справа от блока. Чтобы этого не происходило, используется свойство clear и новые блоки начинаются с новой строчки. Список значений: left – обтекание элемента слева, не допускает; right – обтекание объекта справа, запрещает; both – обтекание объекта с обеих сторон, запрещает; none – разрешено обтекание.

Вышеописанный пример с новым элементом:

<div style="float: left; background: #FFB300; width: 300px;">Блок для контента</div>
<div style="float: left; background: #C0C0C0; width: 200px;">Блок для сайдбара</div>
<div style="clear: both; background: #FFD800; width: 500px;">Новый блок, расположенный снизу</div>

В результате получаем: блок сайдбара, блок контента и расположенный снизу новый блок:

Отступы в блочной верстке

Кроме распределения блоков, нужно правильно задать отступы между блоками и в внутри каждого блока. Это помогут сделать свойства padding и margin. Каждый отступ задается отдельно для правой, левой, нижней и верхней части. Указывают одной строчкой, перечисляя их 4 значения, например:

margin: 30px 20px 0 60 px

С такими параметрами блок будет на 30 пикселей ниже находящегося элемента, на 20 от элемента справа, с нулевым отступом снизу, и отступ в 60 пикселей слева. Если эти данные добавить для свойства padding, то получатся внутренние отступы контента.