Резина на DIV. Не понимаю, почему работает.

asics

Новичок
Резина на DIV. Не понимаю, почему работает.

Нашел пример резиновой верстки на дивах, причем основной контент(центральная колонка) выводится вверху html кода страницы:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Шаблон верстки страницы из 3 колонок</title>
<style type="text/css">

* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#9393FF; height:70px; width:100%; }

#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); overflow:hidden; }

#container1 { width:100%; float:left; margin-right:-180px; }
#container2 { background:#000000; margin-right:180px; }
#container3 { width:100%; float:right; margin-left:-200px; }

#left { background:#AEAE00; width:200px; float:left; }
#center { background:#D86927; margin-left:200px; }
#right { background:#C0C0C0; float:right; width:180px; }

#min_width { width:800px; }

#footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }

</style>
</head>
<body>
<div id="header">Заголовок страницы</div>

<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
<div id="center">Центральная колонка</div>
</div>
<div id="left">Левая колонка</div>
</div>
</div>

<div id="right">Правая колонка</div>

</div>

<div id="footer">Копирайт</div>
</body>
</html>
Код работает отлично.


Никак не пойму зачем в контейнерах margin-right:-180px; и -200, без них не работает, но зачем не понятно.
 

x-yuri

Новичок
а почему ты не задашь этот вопрос там, откуда взял? И что значит без них не работает? Не работает, если убрать эти два свойства? Значит их туда не от фонаря поставили
 

A1x

Новичок
http://webmascon.com/topics/coding/43a.asp
http://flack.ru/2008/02/01/semantic-coding-howto-4/
 
Сверху