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

Верстка

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

В прошлых материалах мы рассматривали резиновую блочную верстку в три колонки разной высоты и табличную верстку в три колонки. Оба этих каркаса могут менять свою ширину в зависимости от размера родительского окна. Но не всегда на странице нужна резиновая верстка. Скажем, нужно сделать страницу шириной в 1024 пикселя, которая будет располагаться по центру окна. В этом случае вполне подойдет фиксированная верстка в три колонки, о которой мы и поговорим далее.

Как и в предыдущих материалах взвесим все "за" и "против" подобного каркаса.

Плюсы

  • Семантическая разметка. Вы всегда можете самостоятельно решить, в какой колонке что будет размещено. Ширина каждой колонки выбирается на ваше усмотрение.
  • Синхронная загрузка структуры страницы. Все колонки загружаются единовременно.
  • Возможнось с легкостью менять дизайн через стили.
  • В параметрах ширины колонок можно указать размеры как в пикселях, так и в процентах.
  • Минимум кода.

Минусы

  • Разная высота колонок.

Основной каркас такой верстки:

Code
<div class="col1">
  Колонка 1
</div>
<div class="col2">
  Колонка 2
</div>
<div class="col3">
  Колонка 3
</div>
<br class="clear">

К этому каркасу привязываем следующие стили:

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

Вот рабочий пример фиксированной блочной верстки в 3 колонки разной высоты на DIV:

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

На этом, пожалуй, все.

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

Не по теме. Немного юмора. Отвлечёмся!

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




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

rss
Категория:Верстка
Просмотрено:8776
Рейтинг:5.0/3
Дата добавления:2013-11-16 11:51, Суббота
Добавил:Szen
Теги:блочная верстка, 3 колонки, блоки, верстка на DIV, фиксированная, колонки

Мини-форум

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

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

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



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