Community Post

CSS - Fixed layouts

💬 comments

Fixed layouts, as the name implies, are created at a specific pixel width as determined by the designer. Akin to print, they allow the designer to control the relationship of page elements, alignment, and line lengths . This layout approach became popular due to the fact that folks have traditionally viewed the Web primarily on desktop monitors with ample real estate, and web designers were keen on reproducing designs that looked exactly the same on every screen. But as you know, times are a’changin’, and we no longer make those assumptions or strive for pixel perfection.

When you design a page to be a specific width, you need to decide a couple of things. First, you need to pick the width, usually based on common monitor resolutions. As of this writing, most sites are designed to be 960 pixels wide or thereabouts to fit nicely in the most common 1024 × 768 monitor resolution. Some designers keep their layouts narrower; some venture even larger as monitor resolution increases. Either way, it is a design decision. You also need to decide where the fixed-width layout should be positioned in the browser window. By default, it stays on the left edge of the browser, with the extra space to the right of it. You can also center the page, splitting the extra space over left and right margins, which may make the page look as though it better fills the browser window.

One of the main concerns with using fixed layouts is that if the user’s browser window is not as wide as the page, the content on the right edge of the page will be hidden. Although it is possible to scroll horizontally, it may not always be clear that there is more content there in the first place. In addition, although the structure of the page doesn’t change, if a user has text set to a very large size to make it easier to read, there may be very few words on a line and the layout may look awkward or break altogether.

Table of Contents

    Lets review the pros and cons of the fixed-width strategy.