Changes in screen size can be a nightmare for web developers, but it doesn’t have to be this way. Craig Grannell reveals the art of creating fixed layouts for multiple screen sizes. Technology, as ever, marches on, and the current situation for web developers is another big screen-size changeover. Those of you who’ve been in the game for a while now will recall the headaches caused by the gradual shift from 640x480 to 800x600, with many sites leaving it until the last possible moment to resize. The same sort of thing’s happening today, with 1,024x768 now the dominant screen resolution, but with 800x600 clinging on by its fingernails, and still accounting for anything up to a fifth of users. In this month’s tutorial, we’re going to show you one method for creating a layout that works well at both of the most popular screen sizes, despite the design being a fixed width. It results in a flexible design that’s suitable for many applications, including corporate sites, portfolios and blogs. Essentially, careful use of ‘height’ attributes and floated divs creates a web page with a fixed main content area and two columns of navigation links at the right-hand side. If the browser window width drops too much below 1,024 pixels, the navigation columns reposition themselves in a linear fashion, one beneath the other.