Setting page widths

[bigdave]

Hi everyone, I have a pretty specific question about setting page widths in CSS.

I've been told that if you're using fixed page widths (which I am at the moment) the ideal page width to set is around 960 pixels, taking into consideration the most commonly used screen resolution being 1024 x 768.

Does that mean that on 1024x768, a width of 960 pixels will usually completely or mostly fill the browser screen?

On some of my designs I actually want to deliberately put "empty" space at either side and have the main design centred in the middle, but have a background image that fills the browser screen.

I know I could set widths in % but as I'm starting out I want to have everything fixed in pixels so it's easier to work out how to exactly position everything.

[falkencreative]

Correct, a width of about 960px will fill up most of the space in a 1024x768 resolution screen without causing horizontal scroll bars. If you want to have more of the background show on a 1024x768 screen, you'll need to make the width narrower.

 

Keep in mind that the 1024x768 resolution is dropping in popularity, with about 85% of people having larger resolution than that.

 

http://www.w3schools.com/browsers/browsers_display.asp

http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

[Mick]

Ben,

Your first link has informative stats besides display resolutions.

 

Here's the July 2012 Browser Statistics:

 

Internet Explorer 16.3 %

Firefox 33.7 %

Chrome 42.9 %

Safari 3.9 %

Opera 2.1 %

 

Thanks for an interesting link.

 

PS: Old school thinking is make your sites compatible with even the oldest browsers--

don't include the fancy stuff. And make sure your site looks the same on each browser.

 

New school: Would you want black/white streamed to your new hi-definition, state-of-the-art

TV? Of course not--you want the latest features exploited. And if you have an old TV, you will

have incentive to update to a new one. Use HTML5 and CSS3 even if the old versions of IE can

not handle some of the features. Just make sure your site is functional even without CSS and

JavaScript. As someone put it, escalators don't break, they temporarily become stairs.

 

Oh, and it's okay if your site looks different on different browsers! Most people only use one,

so they would not even notice that they are "missing rounded corners" for instance, nor would

they care. It's nonsense that the output has to LOOK identical.