Резиновая блочная верстка в 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
Категория:Верстка
Просмотрено:8989
Рейтинг: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:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 393
Статистика
Valid HTML 4.01 Transitional

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



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