What reasons might a website not use the entire width of the browser, like Gmail does?

For example, StackOverflow does not use the entire width — it has left and right margins. This means the entire contents of a page are presented in a column, with white space on the left and right.

Is it a technical reason in most cases, such as to accommodate the display in all types of browsers, or are there design reasons for this decision?

migrated from stackoverflow.com Dec 12 '11 at 6:35

This question came from our site for professional and enthusiast programmers.

  • 28
    I for one think it's hard to track a sentence across 1900 pixels left to right, then back left again to get the next sentence. The fixed width aids in reading paragraph content and also makes the presentation more uniform on different screen sizes. – Jared Farrish Dec 12 '11 at 6:20
  • 1
    It's more of an aesthetic choice, but also can be deemed partially technical as (in my case) I have a 25" monitor, I can't imagine I'd enjoy using SO as much if it were splayed across the entire screen. Gmail does use 100% width (I use it every day). So really it's a little of everything. – Kyle Sevenoaks Dec 12 '11 at 6:23
  • 4
    There was a post here about optimal paragraph length with some interesting responses: ux.stackexchange.com/questions/3618/… – JonW Dec 12 '11 at 8:48
  • 2
    @Jared, I agree that wide lines are too hard. Given that, why would you make your browser wider than what you can comfortably read? Wouldn't the best design principle be: use all and only the space the user has given you (large or small)? – Monica Cellio Dec 12 '11 at 19:38
  • 2
    @kensen john, Get a 55" widescreen TV, set it to an enormous resolution, open up gmail and try to read a long email without physically moving. White space is not wasted space. – zzzzBov Jun 26 '12 at 13:58
up vote 30 down vote accepted

The difference you're talking about is often referred to as "fixed width" versus "liquid" or "fluid" layout.

Fixed width layouts are MUCH easier to design than liquid ones. When you design a liquid layout, you need to control many more aspects of the display. What happens when windows shrink beyond a minimum width? What parts of the window can stretch, and what should be fixed-width columns? Is there a maximum for "body" after which layout will look bad? (I've seen liquid layouts that were almost unreadable on a 1920x1080 display.)

A second reason, vying for the position of most-important, is that fixed width layouts are predictable. In a largish company with a "creative director" or "graphics designer" who is different from the person implementing a web site, the wireframe or example site will likely be done in Photoshop, approved by a manager, and handed off to a web programmer to implement in a CMS (for example). The web programmer doesn't care about fixed width vs liquid, he just wants to get the site implemented the way it was approved by his manager. And variations will require additional approvals, and it becomes impossible to improve a layout that will be different for each browser.

And a third less-important factor... There are a number of web site analytics tools that measure a "heat map", and heat maps are virtually impossible to implement in liquid layouts, since links do not appear in predictable locations on the page.

  • 1
    I wonder how we can use fluid layout prototypes... – jrosell Dec 12 '11 at 14:43
  • 4
    css3's flexible box model will make fluid layouts and content maps work in harmony, especially with box cardinal order rules. – Vic Goldfeld Dec 13 '11 at 9:08
  • 4
    A fourth reason is that good typography is much more difficult to manage across a large screen. Wide lines are hard to read. – Taj Moore Dec 13 '11 at 17:59
  • 2
    One other factor that occurred to me recently is that we've seen in recently years web applications (Google.com, Google Docs, Hotmail, Basecamp, etc) that aim to be fluid, with web presentations (Google's business sites, almost every static site). This follows the standard windows desktop model - you size your application to your preference. Apps with fixed sizes feel very Window3.1ish. Perhaps "web 2.0" will gradually spill over to sites used essentially for marketing. How about text that automatically goes to two or three columns in wide windows? – ghoti Jan 27 '12 at 3:11

I agree with the user Jared Farrish: it's to make the content more readable. If a paragraph spans the entire width of the browser window, it can be taxing on the eye to move from the end of one line to the start of the next line if the paragraph takes up many pixels in width. Many websites tend to limit the width of the page for this reason. In addition, some Web sites use media queries to change the font size if the user's browser window width is very large.

  • 1
    Personally I believe this to be the most important reason. Technology can change as much as it likes to, but our eyes and brains won't for a very, very long time. Sure, there are instances when a website or app can make great use of a 27" widescreen display, but more often than not, that's not the case. It's commonly accepted that the "ideal" measure (the length of a line) for a single column of text is around 65 characters. With default settings in Chrome the measure of these answers seems to be just over 100 characters, so already past the ideal range of 50-80. – bernk May 1 '13 at 12:41

I'm with Peter O and Jared Farrish on this one. It's more to do with how easy us humans find it to track a line whilst reading and then move on to the next line. So it's more to do with tracking back to the beginning of the next line. It's why newspapers print their stories in columns and not across the entire width of the paper.

Certainly media queries can be used to good effect here. Depending on the content of your site you can change the number of columns for varying widths of display, you can also juggle around any navigation/supplementary information to suite wide/narrow screen accordingly.

It all depends on the website. Some will be as a "recommended/minimum" resolution so that the layout stays nice without looking "stretched" on higher resolution settings, and others will be for pure aesthetics.

The "flavor of the month" about 6 years ago was websites that were a middle column only that had large borders of whitespace/gradient on the sides.

it is because of the multiple resolutions. if you want to use entire page, you have to resize the content based on the resolution(like gmail) but is is not possible in each situation.that is the reason to use fixed width for website

One of the best reasons to justify a fixed width layout is readability. For a line of text to be read easily, it should not exceed 70-80ish characters.

Besides that, it's a lot of work to create a fluid layout that performs well on all screen sizes. It's not just a matter of scaling things, entire blocks need to be changed and moved to provide good UX.

Think of navigation menus that collapse to a button [☰] on mobile devices. Not that difficult conceptualize and implement, but you can imagine what it will take to do this for all the elements in your website...

TLDR; Lines of text probably shouldn't be much longer than 70-80 characters, and sometimes a fluid layout isn't worth the effort/cost.

Your Answer


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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