Viewpoint for 1024 * 800?

hey folks,
wanted to know if a website is build in 1024 * 800 Res. what will be the viewpoint at which the website is viewed fully?

You may want to read The Ultimate Screen Rez FAQ because it mentions in much more detail that you’ll never know for sure.

It depends on the thickness of the browser chrome (how wide the scroll bars are, or if there IS a scrollbar) and some people like having a left-sidebar open in their browser (If I hit CTRL B in Firefox I accidentally get one of those things opening up on the left, and it’s a good 100px or so wide). People with a screen width of 1024 may also just keep their browsers slightly smaller so they can grab the edges with the mouse.

I’m currently doing a site where I’ve decided there’s no practical way I can stop scrollbars for 600x800, even though I try to support that size. So I “moved up” to a minimum that works for 1024. First I use my browser’s Window Resizer plugin to see what FF thinks 1024 is, then make the browser somewhat smaller from there (not enough to accomodate a goofy left sidebar in the browser though). So I set my sizes smaller.

When I’m building for 600x800, I set the minimum widths to 750-768px, depending. For 800px screen, this leaves some room for stuff like scrollbars.

For 1024, I try to stick with no greater width than 990px, though in my current project it became 1000px : ( I’m comfortable with the fact that there will be people with a scrollbar even if they do have 1024 resolution.

Probably around 1024 * 800. :wink:

Am I missing something in your question? Do you mean a wrapper width of 1024px?

EDIT: ah, Stomme’s answer makes sense, so hopefully that answers your question.

thnx somme.

The question was about the viewport size when the screen resolution is 1024 x 800.

From the screen resolution you need to deduct any fixed toolbars as the browser can’t occupy that space. The size of the fixed toolbars is unknown as you don’t know if the person has any fixed toolbars, what side of the screen they are attached to or whether they are one level high or six…

From the remaining space you need to deduct the browser chrome (window edges, menus, toolbars etc) as the viewport is contained within that. The size of the chrome is also unknown as it varies between browsers and also on the number of toolbars each person has open.

The last variable to take into account is whether the browser fills the maximum available space or not. As the resolution of the screen gets higher the percentage of people with the browser maximised gets less since higher screen resolutions allow for displaying multiple windows with less overlap. It is also possible on some operating systems to have the browser open to a size bigger than the screen.

So for 1024 x 800 resolution screen the viewport can be anything between 200 x 200 and 2000 x 1500

so it mean i should let the height in % so its dependant of resize of the window or on tool bar.

Stomme i am more concerned about height then width. i need height

Emar, then you’ll have to tell people to use a monitor with x dimensions. Monitors and screens come in many different shapes, which makes it unfortunate that CSS lets us easily compute widths based on browser width but not heights. Bleh. The Winblows machine at work has a mostly square-ish screen with 1024 resolution… but both my laptop and my colleague’s 2" screen are very rectangular… I can’t even properly set my computer’s resolution to 600x800, because things have to stretch on my wider screen.

You can try to go for a “most common middle” to make the page look mostly okay on many screens. But for instance, my screen is 17" and is sitting at 1460x9-hundred-something right now. But when viewing a friend’s page built for my screen size and rez settings, I could not see the bottom of his page without scrolling. Why? Because I was using Firefox, where I have the Web Developer Toolbar under my address bar, and then on the bottom I have a bar that states scripts have been blocked. That eats up a total of around 300 pixels or so of height.

Unless you resort to Javascript that can measure the height and width of the viewable screen, you won’t be able to precisely hit a 1024x800 screen every time. You can just make sure it CAN scroll down and try to go for what you think will look good on most screens/browsers set at that size.

so it mean i should let the height in % so its dependant of resize of the window or on tool bar.

Unfortunately, CSS doesn’t set heights like that. If you set a % height on a box whose parent doesn’t have an explicit (non %) height, then its height will become “auto”, which means “the height of the content inside”.

This does not work:

parent {
height: 60%;
child {
height: 100%;

but this does:
parent {
child {
height: 100%;

There are tricks for getting 100% high pages, and that might be what you’re after… why don’t you check out the CSS FAQ sticky in Design area? The first post has a bunch of common things people ask for, and one of them is 100% height. It also depends on your design, but mostly, you’ll have to try to think of a way to “fake” it, because you only get one chance at 100% height: only one element can do that if you’re using the 100% height technique (well, unless you use the absolutely-positioned columns trick, which needs fixing in IE6). See what you can fake first.

Well what about mobile devices? If you have a 4 inch screen with Internet access, having the right amount of height is impossible. In life, most things are possible, avoiding the need to scroll on the web is not one of them. Simply put: Don’t assume people have any amount of space available, ensure your site is as durable and flexible as you can get away with, and never EVER rely on fixed pixel widths and heights unless you are happy with scrolling being required. There’s no way you can just put down a width and height and guarantee it’ll work… there’s too many screen sizes, resolutions, ways to manipulate windows, sidebars, toolbars and other stuff that can affect the viewport. The cellphone revolution is forcing everyone to rethink what they thought about “everything looking the same” across devices. :slight_smile:

Well what about mobile devices?

Maybe use offtopic brackets with this? I don’t know of any mobiles that are 1024x800, which is what Emar’s talking about. He’s not making a mobile application.

*edit Maybe I’m wrong in my assumption that Emar’s building something specifically for this size, but that’s what I’ve been running with.

Who said mobile application? I’m talking websites here. You do realise most modern cellphones can browse the web as well as a PC right? I’m not trying to make assumptions, but it seems like he wants his website to work without scrolling for everyone… and an increasing percentage of all users use cellphones. :stuck_out_tongue:

so i took a roundup of browsers like firefox and chorme and what i get is i should minus nearly 170 px.

well i don’t want to use it for cellphone its a coopearte web app. what i don’t want is scrolls on a resolution 1280*800. below that scrolls appear i don’t have a problem

As said before, unless you can control all the variables that a user has, there isn’t a pure CSS way to ensure that it looks good on that resolution :slight_smile: