Dimensionless markup using relative (no float)

Inspired by this topic .
An example of how this works .

1. Introduction

Suppose we have a relative class, within which there is text, and do not set its width:

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

we get the rubber block:

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


At the same time, the block has unchanged padding + border and a rubber width, such that width_px + padding_px + border_px = 100%.
For absolute blocks, such a trick does not roll.

2. Separation of blocks by levels

The dependence of each other relative blocks occurs in layers, like the z-index. That is, only in one layer blocks interact with each other, and do not affect others.

For example, the black block is inside gray, and the green block is inside black.

The absolute blocks have coordinates relative to the top corner of the layer in which they lie. If the exact coordinates (top, left, right, bottom) are not specified, then they work as relative, with a shift relative to other blocks.
')

3. Sidebar implementation without float

Based on the first two properties, you can create several relative (or non-expanding, with a given absolute length) blocks, on one layer, with height = 0. That is, the blocks relative to each other will be located only shifted horizontally (but not vertically) using the padding properties. And inside each of these blocks (layers) it will be possible to implement the menu and other wisdom.


The only restriction is the impossibility to use a vlob width: 100% in stretching blocks.

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>


Result:


ps I must say that absolute in the leftbar is taken for compatibility with IE. In Opera / FireFox you can do relative + height = 0.
Example how it works