stacking multiple nested & positioned elements.

pushing and pulling margins.

chaotic test page
#22
13.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.

This container has 'width: auto' declared.

3: This is a space...

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

This container has 'width: auto' declared.

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 {
margin: 0 -10px 50px 10px; 
width: 30%; 
position: absolute; 
left: 0; 
top: 10px; 
}
#independent1 div {
margin: 10px -10px -10px 10px; 
width: 100%;
}

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

/* the usual IE hacks */
* html div#test div div {
position: relative; 
display: height: 1%;
}
/* the extra IE hacks */
* html div#test div#independent2 div, 
* html div#test div#independent3 div {
float: left;
display: inline;
}

Notes:

Internet Explorer 6 fails on all tests initially. However, thanks to the usual hacks, all tests where a width is declared works out quite well.

Extra IE-hacks added to construction 2 and 3, but IE6 still fails on construction 3.

go to test-menu