Take the 2-minute tour ×

I am attempting to create website with a fixed width (970 px) and would like to ensure that it is adjusted to any potential user screen size, but the browser continues to display it in addition to margins created by my overall screen width.

share|improve this question
It's not clear what you're asking here. I don't understand what you mean by 'fixed width', and 'adjusted to any screen size'... Do you mean that you want the 970px wide layout to 'zoom' up to fill the screen? Or that you want the layout to stay 970px wide, no matter what size the screen is? –  Beejamin May 27 '11 at 23:41
Yes, I would prefer that the width fills the screen regardless of of its size. –  Really Curious May 27 '11 at 23:45
Do you mean that you want to design your site to have a fixed width of 970px, but you want the browser to somehow "zoom in" so that everything is scaled to fit the browser width? –  thirtydot May 27 '11 at 23:59

4 Answers 4

If you are trying to make your page span 100% of the width then review this article: Liquid Layout

If you are trying to center your fixed width content on any page width simply use:

margin: 0px auto;
share|improve this answer

It's not a liquid-layout that you're after, but an 'elastic' layout, with an 'auto-stretch' script attached.

There are a few steps to getting this to work:

  • Create your layout using ems for dimensions (instead of pixel dimensions). This has the effect of making the layout 'scalable' while keeping its proportions correct.
  • Apply a scaling value to your <body> element as a percentage. This default setting is useful, because it sets 1em equal to 10px in nearly all browsers:

    body {font-size:62.5%;}

    This would mean your layout would have a width of 97em.

  • Use javascript to detect the width of the user's page, and adjust the scaling value on the body to change the 'zoom' to fit the page. You would want this to run at least once, when the page is loaded, and possibly whenever the browser is resized, also.

Here's a good starting point for elastic layouts: http://www.alistapart.com/articles/elastic

share|improve this answer

You shouldn't set the width. The contents of the page will expand to fill the entire screen by default.

If you need to find the actual width of an element, you can always find that out. If you're using jQuery, it's

var width = $("#my-element").width()
share|improve this answer

If understand what you're getting at, it sounds like you set up your margins incorrectly. to center your content, you'll want your code to look something like this: http://jsbin.com/uyolo4/4/edit

share|improve this answer

Your Answer


