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.
...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.
...and here's some text that serves no other purpose than to fill this space.
...and here's some text that serves no other purpose than to fill this 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.
...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.
...and here's some text that serves no other purpose than to fill this space.
...and here's some text that serves no other purpose than to fill this 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;
}
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.