CSS layout mystery
- by selfthinker
Among the many two (or three) column layout techniques I sometimes use the following one:
<div class="variant1">
<div class="left1">
<div class="left2">
left main content
</div>
</div>
<div class="right1">
<div class="right2">
right sidebar
</div>
</div>
</div>
together with:
.variant1 .left1 {
float: left;
margin-right: -200px;
width: 100%;
}
.variant1 .left1 .left2 {
margin-right: 200px;
}
.variant1 .right1 {
float: right;
width: 200px;
}
This works in all major browsers. But for some very strange reason exactly the same technique but reversed doesn't work:
<div class="variant2">
<div class="left1">
<div class="left2">
left main content
</div>
</div>
<div class="right1">
<div class="right2">
right sidebar
</div>
</div>
</div>
with
.variant2 .left1 {
float: left;
width: 200px;
}
.variant2 .right1 {
float: right;
margin-left: -200px;
width: 100%;
}
.variant2 .right1 .right2 {
margin-left: 200px;
}
In the second variant all text in the sidebar cannot be selected and all links cannot be clicked. This is at least true for Firefox and Chrome. In IE7 the links can at least be clicked and Opera seems completely fine.
Does anyone know the reason for this strange behaviour? Is it a browser bug?
Please note: I am not looking for a working two column CSS layout technique, I know there are loads of them. And I don't necessarily need this technique to work. I only like to understand the reason why the second variant behaves like it does.
Here is a link to a small test page which should illustrate the problem: http://selfthinker.org/stuff/css_layout_mystery.html
