floats

.fl-1,.fl-2,.fl-3,.fl-4 {
border: solid 1px #000; 
width: 100px; 
height: 100px; 
float: left; 
background: #def; 
position: relative;}

.fl-1 {
margin: 0 -100px -90px 0; 
background: #abc; 
z-index: 1;}

.fl-2 {
margin: 10px -100px -90px 90px;
background: #def; 
z-index: -1;}

.fl-3 {
margin: 20px -100px -90px 90px; 
background: #abc; 
z-index: 1;}

.fl-4 {
margin: 30px -100px -90px 90px; 
background: #def; 
z-index: -1;}

.no {
position: absolute; 
top: 40%; 
left: 40%;}

#independent,#nested {
height: 92px;
width: 400px;
margin-bottom: 40px;
position: relative;
z-index: 0;
border-top: solid 1px #999;
border-left: solid 1px #999;
border-bottom: solid 1px #bbb;}

#nested div {
margin-top: 9px;}
#nested div.fl-1 {
margin-top: 0;}

@media screen {
* html #independent div,
* html #nested div {
display: inline;}
}

Notes:

Large negative backside-margins are partly "removing" these floats. That's one method for fixing IE-win's buggy behavior.

Layering is done by using positive and negative z-index. Layering is relative to containers holding the floats. Borders shows how each browser is layering relative to these containers.

- Moz/FF are layering independent floats.
- Moz/FF are layering nested floats.

- Opera(pre v9.0) is unable to layer floats.
- Opera 9 is layering independent floats.
- Opera 9 is unable to layer nested floats.

- Safari is layering independent floats.
- Safari is unable to layer nested floats.

- iCab is layering independent floats.
- iCab is unable to layer nested floats.

- IE-win is layering independent floats.
- IE-win is unable to layer nested floats.

- IE-Mac is layering independent floats.
- IE-Mac is unable to layer nested floats.
- IE-Mac ignores margin-top.

tested browsers:

Opera:

win2K: 7.22, 7.50, 7.54, 8.50, 9.0 pre1

Mac OS-X: 7.54

Moz:

win2K: 1.4, 1.7.2

FF:

win2K: (0.6), 0.8, 1.0

Mac OS-X: 1.0

Safari:

Mac OS-X: 1.2.4

iCab:

Mac OS-X: β280(3.0.0)

IE:

win2K: 5.0, 6.0

Mac OS-X: 5.2

Netscape (Moz):

win2K: 7.2(Moz 1.7.2)

[rev: 20.mar.2005] Flaw in html-code corrected. CSS updated. Notes updated.

[rev: 20.oct.2005] Opera 9.0 pre1 tested - notes updated.

[rev: 28.oct.2005] iCab tested - notes updated.

go to test-menu