Changing Layout Based On Resolution

By on September 21, 2004

Sorry, Stu Nichols, but you now have to share the title of Diabolical Mastermind with Cameron Adams over at Man In Blue for this crazy bit of CSS/JS magic. Cameron is dynamically changing the page layout based on the user’s screen resolution and browser size, just by changing the stylesheet used. Such a cool tip. Don’t miss the demo. I’m usually against incorporating script as a layout/design tool, but this is very cool, and would degrade well, so I’ll make an exception.

The solution is to add a little vitamin J. JavaScript can tell you what the width of a browser is, then react accordingly. By default the content is displayed in a single column. Non-JavaScript enabled browsers, or lower resolution ones, will stay that way. But if you’re 1024-up, with JavaScript, an alternate stylesheet gets put into action.

Let’s not ignore the fact that Man In Blue always has great articles, or that the site’s design is so great, it makes my brain say “delicious”. I see those subtle gradients, and it makes me hungry. Awesome.

Cameron is hereby awarded the Gadgetopia Imaginary Medal for Outstanding Awesomeness, which he can display proudly alongside his other imaginary awards.



  1. I built a demo of something like this a few months ago, however, not nearly as cool.

    I was just toggling the “display” of a third column to “block” or “none” depending on the size of the window. So, if you were wide enough, you could see the third column, if not, you couldn’t.

    I didn’t get it going real-time however. Mine detected the resolution on start-up. If you resized, the changes would be visible on refresh.

Comments are closed. If you have something you really want to say, tweet @gadgetopia.