Кросбраузерная двух колоночная блочная верстка

dve kolonki css Кросбраузерная двух колоночная блочная версткаОчень часто приходиться верстать двух-колоночные сайты с использованием блоков <DIV>, на мой взгляд это один из самых распространенных вариантов представления информации на сайте. Во первых нет излишней перегруженности, во вторых простота реализации. Так как мне приходиться часто верстать сайты именно в таком формате я решил поделиться с вами способом построения такой конструкции.

Стили:

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
#container{text-align:left}
#content p{line-height:1.4}
#navigation{background:green}
#extra{background:yellow}
#footer{background: #333;color: #FFF}
#footer p{margin:0;padding:5px 10px}

#container{width:900px;margin:0 auto}
#content{float:right;width:500px}
#navigation{float:left;width:200px}
#extra{float:left;clear:left;width:200px}
#footer{clear:both;width:100%}

И непосредственно сам HTML код:

<body>
<div id="container">
<div id="header"><h1>Шапка сайта</h1></div>
<div id="wrapper">
<div id="content">
<p>Основной блок, для размещения статей</p>
</div>
</div>
<div id="navigation">
<p>Блок навигации, для размещения ссылок и всего что только пожелаете</p>
</div>
<div id="extra">
<p>Дополнительный блок в котором можно разместить баннеры или иную рекламу.</p>
</div>
<div id="footer"><p>Подвал, счетчики и копирайты</p></div>
</div>
</body>

Преимущества моего варианта верстки:

  1. работает во всех браузерах, включая IE 6
  2. используется минимальное количество тегов и свойств стилей CSS
  3. нет абсолютно ни каких хаков, все работает на чистом коде
  4. нет использования скриптов JavaScript или библиотек типа jQuery, MooTools
  5. полностью валидный код, соответствующий стандартам HTML W3C
  6. вся верстка построена исключительно на блоках DIV
  7. несколькими изменениями в коде легко превращается в резиновую, если это нужно

Имея под рукой этот готовый вариант, вы всегда сможете начать верстать шаблон для любой CMS без предварительной проработки вроде-бы такого простого, но в то же время не послушного действа как структура страницы.

1 Comment to “Кросбраузерная двух колоночная блочная верстка”

  • имя 08.08.2012 в 9:23 пп

    айайайа — подвал не прибит к низу

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

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

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...