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

Author Роман Чернышов    Category CSS, HTML     Tags , , , , , Комментариев 1 Дата 12 Окт

В интернете можно найти множество вариантов трех-колоночной блочной верстки, как кросбраузерную так и написанную только под современные браузеры поддерживающие различные модные свойства 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 пп

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

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

Об авторе и блоге Чернышов Р.В. Сертификат. Топ 10% лучших фрилансеров, Чернышов Р.В.

Друзья, всем привет!

Меня зовут Роман Чернышов, я веб-разработчик и данный блог посвящен моим проектам и бизнесу.

Тут я делюсь личным опытом
и отвечаю на вопросы. Я всегда готов к сотрудничеству с вами, готов реализовать проект любой сложности(опыт 10+ лет).

Если у вас есть вопросы, предложения, вы хотите совершить покупку моих решений или заказать работу, пишите!



Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

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