About this example

If you want to alter your screen layout without having to create a new (X)HTML template and a new central stylesheet, then why not use generic CSS classes (added to <body> element). This example demonstrates how this can be done. By clicking the provided links one of the CSS classes .hidecol1, .hidecol2 or .hideboth is added to <body>.

Toggle to change the layout: hidecol1 | hidecol2 | hideboth

JavaScript has to be enabled for this demonstration.

Column #col1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.

Lorem ipsum ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh.

Column #col2

Integer condimentum, justo a venenatis vulputate, enim pede porttitor eros, non pretium lorem orci id tortor. Nulla a ligula. Mauris nulla arcu, luctus vel, consequat non, luctus eu, nisi. Mauris volutpat, nunc eget pretium blandit, ligula quam commodo nisl, ac fermentum nibh pede et nulla. In condimentum bibendum nisi. Vestibulum risus.

Nullam placerat varius nibh. Quisque tellus sapien, placerat sed, aliquam sit amet, scelerisque sit amet, nisi. Pellentesque eget leo vitae felis laoreet dictum. Duis pellentesque porttitor sapien. Fusce leo. Nulla leo. Donec mattis, justo nec gravida euismod, massa mi posuere mauris.

Column #col3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. Integer congue nisl in mauris. Ut risus diam, ornare eget, interdum id, tincidunt at, eros.

Nulla vitae mauris. Phasellus vel ligula quis dolor bibendum egestas. Duis a massa ut orci varius placerat. Sed leo nulla, tempor nec, commodo in, fringilla vel, nibh. Cras nibh. Pellentesque venenatis felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla gravida nunc. Mauris neque. Cras gravida metus eget sapien. Sed faucibus, turpis ut pretium hendrerit, turpis mauris scelerisque tellus, vel convallis metus massa in neque.