Dimensionless markup with relative (no float)

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

1. Introduction

Imagine we have a relative class, inside which there is text, and do not set width for it:

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

we will get the rubber block:

text

At the same time, the block has immutable padding + border and 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

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

For example, a black block lies inside gray, and a green block inside black.

Blocks absolute, have coordinates relative to the upper 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. Implementation of sidebar without float

Based on the first two properties, you can create several relative (or non-expandable, with a given absolute length) blocks, on the same layer, with height = 0. That is, the blocks relative to each other will only be 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 limitation is the inability to use the width: 100% in stretch 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:

  

    menu
  

  

    text bar
  

  

    left side bar
  

Result:


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