Резиновая блочная верстка в 3 колонки разной высоты на DIV

Верстка

Рисунок Резиновая блочная верстка в 3 колонки разной высоты на DIV
Резиновая блочная верстка в 3 колонки разной высоты на DIV Резиновая блочная верстка в 3 колонки разной высоты на DIV
оценка: 4.2 из 5
оценок: 6

В предыдущем материале мы говорили о табличной верстке в 3 колонки. Такой метод годится для новичков, так как он достаточно прост. Но профессионалы давно используют блочную верстку.

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

Плюсы такой верстки:

  1. Загрузка структуры страницы происходит синхронно.
  2. Для обозначения ширины фиксированных колонок можно использовать как проценты, так и пиксели.
  3. Минимум кода.

Минусы верстки:

  1. Жесткая семантика. Вначале идет навигация, затем идет вспомогательная информация и только после них основной текст.
  2. Резиновой может быть только центральная колонка.

Итак, приступим. Основной карскас резиновой блочной верстки в 3 колонки разной высоты на DIV выглядит так:

Code
<div class="col1">
  Колонка 1 (левая)
</div>
<div class="col3">
  Колонка 3 (правая)
</div>
<div class="col2">
  Колонка 2 (центр)
</div>
<br class="clear">

Тег BR с классом clear нужен для отмены обтекания плавающих блоков.

Стиль для такого каркаса будет такой:

Code
<style type="text/css">
  col1{
    float: left; /* делаем элемент плавающим и смещаем влево */
    width: 25%; /* задаем ширину левой колонки */
    background: #f00;
  }
  col3{
    float: right; /* делаем элемент плавающим и смещаем вправо */
    width: 30%; /* задаем ширину правой колонки */
    background: #00f;
  }
  col2{
    width: 45%; /* задаем ширину центральной колонки (ie fix) */
    margin: 0 30% 0 25%; /* задаем отступы под левую и правую колонку */
    background: #0f0;
  }
  clear{
    clear: both; /* отменяем обтекание */
    font-size: 1px;
  }
</style>

Пример резиновой блочной верстки в 3 колонки на DIV:

Колонка 1
(навигация)
Колонка 3
(форма регистрации, баннеры)
Колонка 2
(основной текст)

На этом пока все. Дальше будет больше.

Удачи в свершениях!

Не по теме. Немного смешного видео.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Резиновая блочная верстка в 3 колонки разной высоты на DIV
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:8535
Рейтинг:4.2/6
Дата добавления:2013-11-15 13:14, Пятница
Добавил:Szen
Теги:блочная верстка, 3 колонки, блоки, верстка на DIV, колонки

Мини-форум

№ 02013-11-15 13:14
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Резиновая блочная верстка в 3 колонки разной высоты на DIV".
Гость
Учавствовать в обсуждении "Резиновая блочная верстка в 3 колонки разной высоты на DIV" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что Вы любите читать?
Всего ответов: 116
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 3
Гостей: 3
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz