Html, css: What is the best approach for screensize

Html, css, screensize

[sanblasena]

I am fairly new to this and am still struggling with what is the best approach to establish the screensize. I develop in 1024 but test on 800 as well. On one site I used tables with percentages and ran into some problems with images being too large and squashing the other stuff. On another I used pixals and centered it, but this left a large margin on a 1024 screen. I have seen DIV with the positioning specified and this looks interesting. I also am aware that you can pick up the screensize in Javascript but I'm not sure what I would do with it. It there any standard - any best way of doing it? I am about to start a new site and wanted to get this cleared up in my mind. Thanks, Pat

[netguy]

I'm new to this as well... but you may want to ask your question in the HTML-Browser forum. This is Google News.

[heini]

moved to HTML/Browsers, thanks Netguy

Sniffing for screen size is a tricky thing. None of the methods are 100% safe, afaik.
And then you have to take into account that screen size does not actually reflect window size.
You might think about going for a liquid design instead.

[tedster]

I agree that liquid design is a good approach. However, not every layout adapts well to a liquid approach -- especially when something like a 1600x1200 resolution enters the picture. maxwidth works nicely to keep the lines of text from getting overly long, but it has had spotty browser support until very recent versions.

screen.availWidth, and screen.availHeight show you the size of the full display that is not consumed by permanent fixtures of the browser and operating system, such as menus or Task Bars. However, that still doesn't tell you the actual size of the window, which may not be filling the entire browser display area.

If you do want to find the size of the window itself:

In Netscape 4--
window.innerWidth and window.innerHeight will return the available space in the window.

The more recent standard is --
document.body.clientWidth and document.body.clientHeight.

However, the script accessing these properties cannot execute until AFTER the body is rendered. So you need to trigger that code by using the onLoad event handler in the body tag -- and that might mean serving up a refreshed page if elements need to be changed, based on the size of the window that the script returns.

When I go down this road at all, I usually use screen.availWidth and trust the user to know how to change their window to the size they need.