Improving Your Fixed-width Website with One Line of CSS

Introduction

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

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.

A Solution

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:

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

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.

The White House

html {
    min-width: 960px;
}

Old Basecamp (must be logged in)

html {
    min-width: 930px;
}

New Basecamp (must be logged in)

html {
    min-width: 985px;
}

Stack Overflow

html {
    min-width: 1000px;
}

CodeCademy

html {
    min-width: 1000px;
}

Cracked

html {
    min-width: 1000px;
}

Living Social

html {
    min-width: 1100px;
}

Rackspace

html {
    min-width: 1000px;
}

Target

html {
    min-width: 1400px;
}

Conclusion

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