Кросбраузерная трех-колоночная блочная верстка (Opera, FF, IE6)

Author Автор: Роман Чернышов    Опубликовано: 12 октября 2010

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

Из приимуществ данного варианта верстки, отмечу следующие:

  • все колонки растягиваются на любую высоту, в зависимости от наполнения контентом
  • абсолютно не каких хаков
  • отображается одинаково во всех браузерах
  • без применения JavaScript или библиотек типа jQuery
  • не используются таблици, только DIVы
  • полная валидность всего кода
  • работает во всех браузерах: ie6, ie7, ie8, firefox 3.5,opera 9, opera 10, chrome4

файл стилей style.css

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}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:1000px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-1000px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}

Код html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример: Кросбраузерная трех-колоночная блочная верстка</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<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>
</html>

1 Comment to “Кросбраузерная трех-колоночная блочная верстка (Opera, FF, IE6)”

  • Игорь 28.06.2012 в 11:20 пп

    В блочной разбивке все хорошо, кроме того, что если слишком нагружена страница, то грузиться она долго. В таком случае предпочтительней табличная разбивка — но это моё личное мнение.

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

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка