floats

overflow: hidden...

chaotic test page
#13
21.apr.2005
rev:21.apr.2005

float with negative margin-bottom and margin-left

only this line shall be visible.

 
Two floats layered on top of each other by negative margins.
This 'margin-bottom: -400px;' removes them from the flow, so they no longer take up any space.
These two float shall not be visible.
.fl-1,.fl-2 {
border: solid 1px #000; 
width: 300px; 
height: 300px; 
float: left; 
clear: both; 
position: relative ;}

.fl-1 {
margin: 0 -400px -400px 10px; 
background: #abc; }

.fl-2 {
margin: 0px -400px -400px 80px; 
background: #bcd; }

.no {
position: absolute; 
top: 10%; 
left: 10%;
width: 250px;
height: 250px;}

#container {
width: 400px;
margin-bottom: 40px;
position: relative;
background: #bcbcbc;
border-top: solid 1px #999;
border-left: solid 1px #999;
border-bottom: solid 1px #bbb;
overflow: hidden; }

Notes:

Large negative margin-right and margin-bottom shall "remove" floats from the flow.

The surrounding container has height: auto; overflow: hidden; set on it, and shall collapse to hide everything except the textline in the normal flow on top.

- Moz/FF is hiding floats. OK

- Opera 7.54 is hiding floats. OK
- Opera 8.00 expands container - floats visible. BAD
- Opera 9.0 is hiding floats. OK

- Safari is hiding floats. OK

- IE-win is hiding floats. OK

tested browsers:

Opera:
win2K: 7.54, 8.00
Mac OS-X: 7.54
Moz:
win2K: 1.7.2
FF:
win2K: 1.0
Mac OS-X: 1.0
Safari:
Mac OS-X: 1.2.4
IE:
win2K: 6.0

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

go to test-menu