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%)
  • 1
    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. Dec 12, 2013 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, 2015 at 22:00

4 Answers 4


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.

  • "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.
    – Lovis
    Dec 12, 2013 at 9:56
  • The rest of your answer is of cause still valid and very reasonable. :-)
    – Lovis
    Dec 12, 2013 at 9:57
  • 3
    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, 2013 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.


Bootstrap is widely used to design the website quickly and it comes with max-width: 1140px for large screens (1200px and above)

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
@media (min-width: 992px) {
  .container {
    max-width: 960px;

and so on for more smaller screens.


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;
  • Why is this down-voted? @nobrandheroes seems to be the only answerer advocating for less horizonal white space. maybe you should address the reasoning behind each bullet point, and perhaps include the CSS for that. But people, this is an opinion; I hope it wasn't downvoted because you don't like his/her opinion and want to cling to your dogmatic values handed down from bootstrap or tailwind.
    – Todd
    Aug 11, 2021 at 14:19

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.