How wide should your website be?

A question asked by many people new to designing websites is "How wide should I make my website?" It's important to figure out the perfect width for your website so that you can display your content nicely without requiring horizontal scrolling.

Your website's audience

When deciding on a width for your website, it's important to think about who will be seeing your website. For example, if you plan on having a website targeted at people who would probably have older computers with smaller monitors, you should stick with a narrower design. If you think that most of your target audience would have widescreen monitors, you can try making your website wider.

According to Google Analytics, the most common screen resolution of visitors to is 1440x900, at about 36%. The narrowest resolution is 1024x768, at about 9%. The main content box is 872px wide, so there shouldn't be any problems with horizontal scrolling. However, some people may not have their browser window always maximized. My monitor resolution is 1440x900, but I've set my Firefox window to 1250x770.

With more and more people using netbooks with smaller screens, It's becoming more important to have a narrower website. It's important to consider whether your visitors would be using desktops or laptops.

Also, with more people using mobile devices for internet surfing, it's important for your website to scale down nicely for viewing on tiny screens. Just don't make your website the smallest size possible just for mobile devices.

Don't set a specific width at all

Probably the best way to set the width for a website is to not set one at all. At least not a fixed width. Instead, specify widths in your stylesheet in percents so that when a person resizes their browser window, the box resizes with it. However, someone with a very large widescreen monitor may maximize their browser window and cause your website to look too wide. Though a person with a large monitor probably would not occupy the entire space with one window for this reason. Therefore, you can use the css max-width property to set the maximum width of the box. Unfortunately, this doesn't work in everybody's favourite browser, IE6.

To get around this problem, add !important to your width in percent, and a width in pixels under it. IE6 will use the second value, and all modern browsers will use the value with !important.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!


  1. July 28, 2009

    Interesting. I am planning to do this in my blog. Hope your tut will help me to do it without much work.

  2. Yeisa
    September 1, 2009

    Can you please help me by showing the codes, you are using, so that I can insert the html code to the website. I appreciate the help. Thanks.

  3. September 1, 2009

    Yeisa: For your container div, simply give it an id of 'container', or something like that, and in your CSS, set the width of #container to whatever you want.

    For example:
    <div id="container">
    Stuff that goes here

    #container {
    width: 800px;

    Hope that answers your question!