Switchy McLayout

By Marc Dobbelsteen on Dec 27, 2006


This script and CSS combination allows you to define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes. A news site, for example, could have one layout and appearance for wide screens, one for medium-sized screens, and another for PDAs. Images could shrink or even disappear according to the screen size, columns could come and go as needed to maintain readability, and you can achieve a more efficient use of the available space for each screen size.

Try the example page. Also, try resizing the page and notice how it adjusts.


  • Created by: Marc van den Dobbelsteen
  • Web Site: http://webbforce.nl/
  • Posted: December 27, 2006

Read the complete details of this technique here.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: behaviors_news.js


Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Paste this code into the HEAD section of your HTML document.


Paste this code into the BODY section of your HTML document