CODEWITHSUNDEEP
htmlcsssize
Really Curious
Really Curious

Reputation: 41

How can I scale a web page width (in pixels) to any screen size?

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.

Upvotes: 4

Views: 28437

Answers (4)

Ben Hull
Ben Hull

Reputation: 7673

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

Upvotes: 2

BentOnCoding
BentOnCoding

Reputation: 28188

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;

Upvotes: 3

Jimmy
Jimmy

Reputation: 637

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

Upvotes: 0

Sam Magura
Sam Magura

Reputation: 990

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()

Upvotes: 1

Related Questions