CSS layout mystery -

Many of the two (or three) column layout techniques sometimes use the following:

  & lt; Div class = "left1" & gt; & Lt; Div class = "left2" & gt; The left main content & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "right1" & gt; & Lt; Div class = "right2" & gt; Right sidebar & lt; / Div & gt; & Lt; / Div & gt;  

at the same time:

  .variant1. Left1 {float: left; Margin-right: -200px; Width: 100%; }. version 1. Left1 .left2 {margin-right: 200px; }. Version 1 .right1 {float: true; Width: 200px; }  

It works in all major browsers, but for some very strange reason absolutely does not work on the same technique :

  .variant2 .left1 {float: left; Width: 200px; } .variant2 .right1 {float: true; Margin-left: -200px; Width: 100%; } .variant2 .right1 .right2 {margin-left: 200px; }  

In the second version, all text in the sidebar can not be selected and not all links can be clicked . This is the least truth for Firefox and Chrome. Links to IE 7 can be minimized and Opera looks perfectly fine.

Does anyone know the reason for this strange behavior? Is this a browser bug?

Please note: I am not looking for two column CSS layout techniques working, I know that there are loads of them and I need this technique to do the job Do not need to. I understand only that reason that the second edition behaves like this.

Here is a link to a small test page that should clarify this problem:

This is a basic layering issue. To find out, parse the CSS space.

The order in which the tree is painted on the rendering canvas, which is described in the context of a heap of references.

OK, we see what we are in "stacking context". For this, we have to know when the new stacking reference is made.

[A z-index of one] ... integer is the stack level of the generated box in the current stacking reference, a local stacking reference is also installed in the box, where its stack level is '0' .

OK, we do not have a z-index value - so they are all Auto

The basic element creates the root stacking reference Other Stacking Reference Also generated by element (with relative elements), in which the 'z-index' is calculated in addition to 'auto-o'.

No, it seems that we are all in "root stacking context"

In the stacking context, boxes containing the same stack level are document tree order According to the back-to-front stack is done.

Why this definitely explains .right1 on the paint .left1 - Then the source is in the sequence (note that if If you have been removed from margin-left: 200px to .right2 you will see better paint-over issue.)

Therefore, Know (and it is according to imagination) - how do we fix it? The simplest task should be to just exceed .left1 to z-index .right1 . Since they are in the same stacking context, the higher the z-index source will override the order:

.variant2 .left1 {position: relative; Z-index: 1; Or, if we keep reading the imagination - then we will see that:

Each stacking reference has the following stacking levels (from back

Stacking reference to the element having the negative stack level.

Stacking

Steak level for non-positioned floats and their content.

A stack for in-stream inline-level Stacking reference for the lineage with the status 'Z-index: auto', and the stacking reference of any lineage with 'z-index: 0'.

Stacking of positive lineage of stack level Context.

Which means that we can actually do this:

.variant2.left1 {status: relative;} < / Code>

which will give "stacking level" of 6 to "left." - which will override the .right1 's stacking level 4.