Improving your fixed-width website with one line of CSS and a list of some popular websites that could be using it now

Firstly, the purpose of this post isn’t to call out or shame any specific website’s front-end mishaps or to belittle the hard work that went into them. The purpose is to showcase common errors when doing a fixed-width website and how even some of the most popular and amazing sites we often use overlook them.

With the age of mobile and responsive websites, more and more websites have fluid layouts. I personally feel it’s becoming a standard amongst front-end developers to be developing with percentages or “em” units over pixels when possible; however, occassionally, the CSS can get mixed between fluid and fixed and create unexpected errors in the layouts especially when resizing the browser.

The common errors I often see can be reproduced when:

The browser width is less than the width of the largest container and a user scrolls to the right.
A fixed header or fixed element doesn’t scroll horizontally with the rest of the website.
Fluid containers on a fixed layout website causing layout issues when resizing the browser.
100% width size of a div or container is of the viewport and not the container.

If your fixed-width website is having layout issues when resizing the browser, being at different viewport sizes, or when scrolling horizontally, a quick-fix CSS trick is to add:

Quick and easy fix for fixed-width layout resize issues


    html {
        /* Size of largest container or bigger */
        min-width: 1080px;
    }

If you know any problems or issues with this fix or alternate solutions, please flag and spread the word in the comments!

Fixed-Width Website Issues Examples

Below is a list of sites where you can see the issue in hand. The easiest way to see these bugs I’m highlighting is to just visit the site, resize your browser to be smaller than its largest container, and then scroll to the right. In some cases you’ll see the errors without even scrolling right. Otherwise, you can hover on-and-off the images below to see screenshots of what this fix will correct.

whitehouse.gov

Possible Fix:


    html {
        min-width: 960px;
    }


Old Basecamp (must be logged in)

Possible Fix:


    html {
        min-width: 930px;
    }


New Basecamp (must be logged in)

Possible Fix:


    html {
        min-width: 985px;
    }


Stackoverflow

Possible Fix:


    html {
        min-width: 1000px;
    }


Code Academy

Possible Fix:


    html {
        min-width: 1000px;
    }


Cracked

Possible Fix:


    html {
        min-width: 1000px;
    }


Living Social

Possible Fix:


    html {
        min-width: 1100px;
    }


Rackspace

Possible Fix:


    html {
        min-width: 1000px;
    }


Target

Possible Fix:


    html {
        min-width: 1400px;
    }