DOM columns example

Demonstration

Toggle columnar output

This is a demonstration showing the use of a DOM-based multi-column layout. The principal site is created with a single column, then using an analysis of the page's dimensions a DOM script will determine how many columns could replace the single column within the space available.

This routine is in its initial design phase and has not been optimised nor the rough edges taken off. There are several known shortcomings including difficulties with start and end tags when splitting blocks in IE6/Win. The function works well in Firefox, Safari and Camino at present and, to a lesser extent, Opera 8.5.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra mauris vel sem. Vestibulum tristique, turpis quis varius accumsan, nisl ante porta leo, in feugiat diam sem vel lectus. Etiam lectus purus, malesuada id, fringilla sed, vulputate et, dolor. Cras posuere enim in neque. Pellentesque sagittis placerat orci. Fusce tempus, risus tempor commodo blandit, dui ligula condimentum lacus, ac lacinia orci risus nec dolor. Donec pellentesque leo in est. Fusce lacinia semper odio. In hac habitasse platea dictumst. Praesent ultricies rutrum risus. Curabitur rutrum tincidunt tellus. Nulla posuere libero interdum mi. In varius. Ut ut nisi.

Integer nonummy blandit magna. Cras sagittis. Nam bibendum fringilla pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean viverra ipsum nec velit. Cras lacinia tortor eu enim tincidunt vestibulum. Sed adipiscing. Nullam purus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas dictum varius sapien. Integer nonummy condimentum dolor. Morbi risus. Pellentesque venenatis, lorem vitae euismod eleifend, ligula odio commodo leo, eu placerat massa leo a tellus. Cras ultricies dui non leo. Maecenas justo elit, hendrerit a, pellentesque nec, pharetra tincidunt, tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Alas, we have digressed!