/    Sign up×
Community /Pin to ProfileBookmark

screen resolution and horizontal scroll

Copy linkTweet thisAlerts:
May 13.2008

Hi folks,

I am working with a design that has a content section that is exactly 1024px wide. On either side of the content there are 18px borders, making the total width of the design 1060px. (1024+18+18). Users with a 1024 display should only see the main content, while users with higher resolution will see the borders as well.

The issue is, how can I avoid a horizontal scroll bar from appearing for 1024 users? I can’t think of any solution for this – and this also seems to be why most sites either have a bit of leeway at 1024, or have some additional content that gives the horiz scrollbar a good reason for existing…any ideas? Something liquid?

thanks

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326May 13.2008 — Have you tried overflow:hidden on the body?
Copy linkTweet thisAlerts:
@ErrantMay 14.2008 — What sort of borders are they? If they can be incorporated into a background image on the <body> that'd be your easiest solution. Otherwise I think you'll have to go the Javascript route and sniff for the user's screen resolution.
Copy linkTweet thisAlerts:
@CentauriMay 14.2008 — If the content is 1024px wide, then users with a 1024px horizontal resolution with the browser maximised will still get a horizontal scrollbar if the height is greater than the screen anyway, due to the space required for the vertical scrollbar. The content would need to be no bigger than about 1004px wide. If the 18px borders can be tiled vertically, then making one wide graphic, which incorporates each side border and the content background colour, can be tiled vertically and centrally positioned as a background to the body.
×

Success!

Help @johnnyblotter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...