A slightly idiotic pure CSS layout table

by Brenton Strine

HTML

<ul>
    <li>one one one</li>
    <li>two</li>
    <li>three</li>
    <li>four four four</li>
    <li>five five five five</li>
    <li class="newrow">six six</li>
    <li>seven seven</li>
    <li>eight eight eight</li>
    <li>nine nine</li>
    <li>ten ten ten ten</li>
</ul>

CSS

ul > li { line-height: 30px;}
.newrow,
.newrow ~ li {
    position: absolute;
    top: 0;
    left: 120px;
}
.newrow + li {
    top: 30px;
}
.newrow + li + li {
    top: 60px;
}
.newrow + li + li + li {
    top: 90px;
}
.newrow + li + li + li + li {
    top: 120px;
}
.newrow + li + li + li + li + li {
    top: 150px;
}
.newrow + li + li + li + li + li + li {
    top: 180px;
}
.newrow + li + li + li + li + li + li + li {
    top: 210px;
}