stacking multiple nested floats.

pushing and pulling margins.

chaotic test page
#21
12.aug.2006
rev: 13.aug.2006

the basics for simple drop-shadows and similar effects.


1: This is a space...

...and here's some text that serves no other purpose than to fill this space.

The amount of text doesn't matter, since this is a self-adjusting construction.

2: This is a space...

...and here's some text that serves no other purpose than to fill this space.


3: This is a space...

...and here's some text that serves no other purpose than to fill this space.

4: This is a space...

...and here's some text that serves no other purpose than to fill this space.

The amount of text doesn't matter, since this is a self-adjusting construction.


5: This is a space...

...and here's some text that serves no other purpose than to fill this space.

The amount of text doesn't matter, since this is a self-adjusting construction.

6: This is a space...

...and here's some text that serves no other purpose than to fill this space.


7: This is a space...

...and here's some text that serves no other purpose than to fill this space.

8: This is a space...

...and here's some text that serves no other purpose than to fill this space.

The amount of text doesn't matter, since this is a self-adjusting construction.


#test div { 
background: #ddd; 
border: solid 1px #fff;
}

/* the first construction */
#independent1 {
float: left; 
margin: 0 -10px 50px 10px; 
width: 30%; 
}
#independent1 div {
float: left;  
margin: 10px -10px -10px 10px; 
width: 100%;
}

/* ...and seven more... */

/* the usual IE hacks */
* html div#test div {
position: relative; 
display: inline;
}

Notes:

Internet Explorer 6 fails on all tests. However, thanks to the usual hacks only construction 5 and 8 are complete failures.

More about the technique can be found on floats: nested and partly removed.

go to test-menu