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

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

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

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

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

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

Просмотр кода PHP

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

Просмотр кода PHP

<!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>

Смотреть пример | Скачать пример

CSS, HTML

css, html, ie6, валидно, верстка, кросбраузерно

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

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