HTML: Блочная верстка

Вместо табличной можно использовать блочную верстку, которая использует блоки для создания базового шаблона страницы. В качестве блоков выступает html тег DIV, поэтому такую вёрстку ещё называют "вёрстка дивами". Далее с помощью стилей эти блоки позиционируются на странице определенным образом, формируя шаблон, который уже затем наполняется различным контентом.

В следующем примере используется 5 элементов <div> для создания макета страницы из двух колонок:

<html>
  <body>

    <div id="container" style="width:500px">

      <div id="header" style="background-color:#A3FFC2;">
        <h1 style="margin-bottom:0;">Верхняя часть сайта</h1>
      </div>

      <div id="menu" style="background-color:#FFFFB8;height:200px;width:100px;float:left;">
        <b>Меню</b><br>
        Пункт 1<br>
        Пункт 2<br>
        Пункт 3</div>

      <div id="content" style="background-color: #fff;height:200px;width:400px;float:left;">
        Место для контента
      </div>

      <div id="footer" style="background-color:#A3FFC2;clear:both;text-align:center;">
        Copyright © 2011 www.puzzleweb.ru
      </div>

    </div>

</body>
</html>

Результат данного примера в окне браузера:

Верхняя часть сайта

Меню
Пункт 1
Пункт 2
Пункт 3

Место для контента

Примечание: для уменьшения объема кода и удобства редактирования css стилей, сразу для нескольких страниц, сделанных по одному шаблону, рекомендуем вам выносить весь css-код в отдельный файл.

С этой темой смотрят: