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

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

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



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