Безразмерная разметка с помощью relative (без float)

Навеянно этой темой.
Пример, как это работает.

1. Введение

Представим, мы имеем класс relative, внутри которого имеется текст, и не задаём ему width:

#bar{
position:relative;
border:5px solid #00FFFF;
padding:10px;
height:200px;
}

мы получим резиновый блок:

<div id="bar">
text
</div>


При этом, блок обладает неизменными padding+border и резиновым width, таким, что width_px+padding_px+border_px = 100%.
Для absolute блоков, такой трюк не прокатывает.

2. Разделение блоков по уровням

Зависимость друг к другу relative блоков происходит по слоям, как у z-index. То есть только в одном слое блоки друг с другом взаимодействуют, и не влияют на другие.

Например, черный блок лежит внутри серого, а зеленый блок внутри чёрного.

Блоки absolute, имеют координаты относительно верхнего угла слоя, в котором они лежат. Если точные координаты (top, left, right, bottom) не указаны, то работают, как relative, со сдвигом относительно других блоков.

3. Реализация sidebar без float

Исходя из первых двух свойств, можно создать несколько relative (или нерастягивающихся, с заданной длиной absolute) блоков, на одном слое, с height=0. То есть блоки друг относительно друга будут находится лишь сдвинутыми по горизонтали (но не по вертикали) с помощью свойств padding. А внутри каждого из этих блоков (слоев) можно будет реализовать меню и прочие премудрости.


Единственное ограничение — это невозможность использовать влоб width:100% в растягивающихся блоках.

CSS:

#leftbar{
position:absolute;
height:0px;
width:198px;
margin:0px;
padding:0px;
top:0px;
}
#rightbar{
position:relative;
padding:0px 0px 0px 200px;
margin:0px;
height:0px;
}
#sidebar{
position:relative;
border:1px solid black;
background:#808080;
height:200px;
}
#menu{
position:relative;
border:1px solid black;
background:red;
height:20px;
}
#text{
position:relative;
background:white;
}


HTML:

<div id="rightbar">
  <div id="menu">
    menu
  </div>
  <div id="text">
    text bar
  </div>
</div>
<div id="leftbar">
  <div id="sidebar">
    left side bar
  </div>
</div>


Результат:


p.s. надо сказать, что absolute в leftbar взято для совместимости с IE. В Opera/FireFox можно обойтись и relative + height=0.
Пример, как это работает