This is something that I’ve been include in my personal projects for some time now, but it’s come up again for a client, so I thought I’d share:
The optimum browser dimensions are not: 800x600 or even 1024x768.
You’re close, but wrong. Here’s why.
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
Height never mattered[](#height-never-mattered)
† It only matters if you’re short!
The height means nothing on a web page, unless you’ve got a very simple page that specifically must be entirely viewable in the viewport (the bit of visual browser content). However, for the rest of us, the page will be tall than 600px or some other arbitrary height to allow us to show off our content.
You can’t own the screen real estate[](#you-cant-own-the-screen-real-estate)
So this is the kicker. If your page is 800px wide, and your browser is 800px wide with no content, the page is going to look just fine. Except you don’t have any content.
Once you put content on that page, and you go past the height of the browser (the browser might not even be maximised - wow!) you’re getting a right hand scrollbar. That scrollbar, in most cases is never wider than 20px.
So now your site is 800px and you’ve got a 20px scrollbar which means the viewport is 780px and your total browser width required is 820px…which results in the dreaded horizontal scrollbar!
To conclude: less 20[](#to-conclude-less-20)
So, when you pick your ideal browser width, subtract 20px from the width and it will be fine when the vertical scrollbar appears.
Published 20-May 2008 under #css & #design & #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/its-not-800x600.md)
Comments
Lock Thread
Login
Add Comment[M ↓ Markdown]()
[Upvotes]()[Newest]()[Oldest]()
?
Anonymous
0 points
13 years ago
I always have to explain this when I get a mockup from someone who works primarily in print.
?
Anonymous
0 points
15 years ago
I’ve done this so much ( always -30px in my container css ) , i forgot why i was doing it :)
Good Point in your post Remy.
PS: i’ve written an article in french ( caus i’m french of course ), about your little project CodeDumper that I found very usefull for developpers and bloggers, hope you have lot of success.
[http://youssef.boubia.com/i…;](http://youssef.boubia.com/index.php/2008/05/20/29-codedumper-un-nouvel-outil-pour-les-developpeur)
?
Anonymous
0 points
15 years ago
Yep - this is the same reason people have been making container divs 760 or 780 pixels wide for the last few years…
[Commento](https://commento.io)