I've noticed more and more sites have gone to a fixed-width layout, where resizing the browser window just causes scrollbars to appear, as opposed to a flexible layout, where resizing the browser causes the components of the page to "scrunch" together.
The StackExchange sites like this one are an example of the fixed layout. GMail and iGoogle are examples of the flexible layout. What are the reasons for choosing one over the other?


7 Answers 7


More complex designs can be very difficult to realize with variable width layout. So I imagine that plays a role.

There is also the fact that it is not comfortable to read text that is very wide. The column size on StackExchange sites is quite manageable and easy to read. With a variable width layout, you can not just extend the main text body across without it becoming illegible. Even Google limits the width of their search results.

Of course if you have a site where space is at a premium (like Google Docs and Google Maps) you really want to go with a variable width scheme to use all the available space.

  • 1
    +1 for the text reading width point. Doesn't matter if the monitor is 1680px wide - you wouldn't see a newspaper put text across the whole page width. Commented Jul 29, 2010 at 10:12

Fixed with is much easier to developer for complex sites. Also, most fixed width sites will be around 1000 pixels wide. The reason is only 1% of browsers use 800x640 and 0% use 640x480. Check out the most current stats here. This doesn't include mobile though. Which is an entirely different ball game.

The value of variable width layout is that it allows people to use the website easily in a window that is not maximized.

You have to look at your audience and decide based off of what experience you think they want and if variable width is more important than other features that you won't be able to develop if you have to do variable width.

  • Can you give me an example of a feature that wouldn't work with a variable layout?
    – BenV
    Commented Jul 28, 2010 at 16:58
  • 3
    It isn't that features don't work with variable layouts. It is that you must spend more time testing and developing variable width layouts because you have to manage how chunks of your page handle moving around each other. Commented Jul 28, 2010 at 17:36
  • Ah, I misinterpreted your last sentence. I understand now.
    – BenV
    Commented Jul 28, 2010 at 19:23
  • One problem with some variable layouts is that they don't have min-width set for the main content, so if your window is too narrow, you get text squished into an extremely narrow column, making it very hard to read. Fixed width layouts have the opposite problem when they hardcode the width rather than max-width and the main text cannot be read without horizontal scrolling. Commented Jul 28, 2010 at 21:03

There is also a compromise between the two where you set a min width and a max width (using CSS) and then use percentage widths to make the rest flow in between the two extremes. For instance, you might want a left-hand menu column to not get narrower than 200px but the main content to flow. This technique enables your site to scale to the visitors resolution, without looking silly at extremely high resolutions or extremely low resolutions. HTML, after all, was designed to flow - it is a mark-up language and not the same as print.

This approach works well for relatively simple designs, such as blogs or ones that present a lot of textual information. Indeed, I use it on my own personal website. After all many people now have wide-screen or high-resolution monitors - my work monitor is 1680px wide - so why should they lose a large degree of real estate and have to horizontally scroll simply because a designer decided on a fixed width that suited their screen? In the end good design is about giving users the best possible experience - it's not just about what looks "pretty" on the designer's monitor.


You may not have to make that choice. A List Apart has an excellent article on Responsive Design. The main idea is that you can use media queries to catch changes in the browser window or viewport size and reassign CSS as necessary. There's a lot to read there, so check out the article for all the juicy details. But for the long and short of it (or should that be the "wide and narrow" of it?) look at the before and after pages of their example. The before page scales nicely up to a point, but if you make it narrow enough it gets a little clunky. The after page scales as well but also changes layout when you make it too narrow for scaling to work nicely.


According to Jakob Nielsen's 113 Design Guidelines for Homepage Usability:

67 Use a liquid layout so the homepage size adjusts to different screen resolutions.

It's also one of the The Ten Most Violated Homepage Design Guidelines:

Fighting frozen layouts seems a lost battle, but it's worth repeating: different users have different monitor sizes. People with big monitors want to be able to resize their browsers to view multiple windows simultaneously. You can't assume that everyone's window width is 800 pixels: it's too much for some users and too little for others.


What about a mix-up? This displays the #content-section in a fixed width (70em) if there is enough room - otherwise the section is shrinked to 80% of the view-port/browser window.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

The advantage of a dynamic layout is that it works across all screen sizes, including mobile devices. It's harder work though to make things look good at all those sizes. The question to ask is - are your visitors going to be using mobile devices?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.