I was working on an interface with a liquid layout recently that looked pretty good when the browser was at a relatively average width (600 to 1000 pixels). However, when I checked it on a really wide screen, the layout started to get a little wierd. Everything stretched as it should, but with a large window there was too much white space and the design started to break apart. Aside from designing the site differently, using CSS2 max-width property would probably be the best solution. But of course we haven’t quite made it to CSS2 yet unless we’re willing to ditch a good percentage of our customers.

However, it got me thinking that it would be interesting if the site could be styled completely differently depending the width of the browser window. For example, having certain sidebars visible if there’s enough room - otherwise showing them in the footer. After about thirty minutes of goofing off I had something working:

View The Working Example

The example page has all of the details and a link to the javascript that you can download. The basic idea is that the window.onresize event is handled, the window size is checked and a div tag className is set. using that className, you can code your CSS to behave differently at different widths. So, aside from having one javascript reference, your code can still be nice and clean.

Unfortunately, as usual IE 6 struggles to keep up [Update: Safari struggles as well]. I spend the next two hours trying to figure out why IE 6 calles window.onresize anywhere from 1 to 3 times whenever the browser is resized. Furthermore, it calculates the actual document width - not browser width. So, if your document is hard-coded at 800px, IE will always return a width of 800px, even if the browser window is smaller and there is some horizontal scroll. In the worst case, IE would get stuck in an infinite loop during some resizing as it would fire off onresize again and again as the page width adjusted to the style change. I took a rather ham-handed approach of just disabling the resizing event after 10 or so times in a loop.

If you have any feedback or ideas to improve upon this code and/or fix the IE glitches, please feel free to post a comment.

Share This