Sign up ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

My websites uses fluid width design. The CSS looks like this:

#wrapper {
    min-width: 960px;
    width: 90%;
    max-width: 1200px;

The min-width must be 960px but I am open to suggestions about width and max-width keeping in mind that:

  • Majority of visitors have 1366px or wider screens
  • There is a separate version for mobile website (so no need to go responsive)
  • I need some left and right margin for background to show
  • The website uses two column layout (25% + 75%)
share|improve this question
Have you looked into Twitter Bootstrap and the responsive Grid system it offers? It, or perhaps another pre-packaged CSS library, may provide for your needs. – Evil Closet Monkey Dec 12 '13 at 17:58
I usually set widths in terms of ems (or rems), and I think this is fairly common practice these days. This gives you more control over the text line character count. If you set the width in px, and the user has set the browser to have a small font, the line character count could be higher than is efficient, and if set to a large font size the line character count will be smaller. If the width is set in terms of ems the line character count will remain the same (more or less) regardless of the browser's font size setting. – obelia Jun 16 at 22:00

3 Answers 3

up vote 7 down vote accepted

Majority of visitors have 1366px or wider screens

But note that screen size isn't necessarily browser viewport size

There is a separate version for mobile website (so no need to go responsive)

What about tablet users? Do they get the mobile version? Or the full version? It's not necessarily bad they get the mobile, but if the mobile doesn't scale up to tablet screens, and your site doesn't scaled down, you might be frustrating users that use tablets.

There is no right answer to your question, we can merely toss out various numbers, so it's not the best question for this format. That said, the main reason to go with a fluid layout is to accommodate more browser size preferences than if it were not fluid, so I'd consider setting your min and max options as low and high as it makes sense to based on the particular content and the readability of said content at various widths.

share|improve this answer
"It's not necessarily bad they get the mobile" - I disagree. It is bad. Almost everyone is using tablets as a replacement for desktop-computers (At least when it comes to internet browsing). Offering mobile versions is (in my opinion) only ok if your regular page uses flash or is very javascript-heavy. – L. Möller Dec 12 '13 at 9:56
The rest of your answer is of cause still valid and very reasonable. :-) – L. Möller Dec 12 '13 at 9:57
If I could, I would give you +10 for "note that screen size isn't necessarily browser viewport size". I have seen the argument of "screens are very wide" way too often in articles, and none of those authors even mentioned the possibility that a customer might not want to devote all of his screen estate to a single web page. – Rumi P. Dec 12 '13 at 12:28

The problem of responsive design and optimal resolution of web page is old and the old fashioned way of setting the best resolution for your web page so it can be viewed on many monitors with various sizes is to use the average resolution between monitors with different sizes which is 1024 x 768.


.warraper { width: 1024px; margin: 0 auto; // to center your div. }

The 1024px resolution will make your web page more compatible with a range of monitors old and new, it will also ease the process of calculating inner spaces for various other elements inside wrapper div.

share|improve this answer

This is my input, and relates to the above.

  • Your website should have no wasted space on a 1920 monitor, fullscreen.
  • Your website should have no wasted space on a 1920 monitor, half-screen.
  • No horizontal scrolling(Removes vertical space)
  • Factor in the interface chrome.

So perhaps your CSS Should be

#wrapper {
  min-width: 920px;
  width: 90%;
  max-width: 1920px;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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