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

CSS-стили

Code

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-код

Code

<body>
<div id="container">
<div id="header"><h1>Шапка сайта</h1></div>
<div id="wrapper">
<div id="content">

Основной блок, для размещения статей</p>
</div>
</div>
<div id="navigation">

Блок навигации, для размещения ссылок и всего что только пожелаете</p>
</div>
<div id="extra">

Дополнительный блок в котором можно разместить баннеры или иную рекламу.</p>
</div>
<div id="footer">

Подвал, счетчики и копирайты</p></div>
</div>
</body>

Источник

Метки

Опрос: Чего добавлять больше?

Результаты опроса

Главная » Файлы » Полезные ссылки » Кросбраузерная двухколоночная блочная верстка