-
1. Re: How to prevent a horizontal scroll bar from appearing?
mahendra rajeshirke Oct 3, 2010 10:24 AM (in response to TCarp) -
2. Re: How to prevent a horizontal scroll bar from appearing?
Nancy O. Oct 3, 2010 10:42 AM (in response to TCarp)This is a complex question.
Best practice is to allow scrollbars to appear naturally. If you disable scrollbars and your site visitors need them, your site may become unusable.
Browser viewport can be anything from handheld (320px wide) up to multi-panel display and everything in between. Know who your target audience is and build your site accordingly.
Google labs - Browser Size
http://browsersize.googlelabs.com/Layouts can be either liquid (% of viewport), elastic (in ems) or fixed-width (in pixels). Deciding which one is appropriate for your particular project depends on the amount of content you need to display per page, target audience, devices, and personal preferences.
Liquid layouts can get unwieldy on super wide or super narrow displays. Thus, if I have a lot of content to display, I prefer to use a semi-liquid layout - % based along with min- and max-width restrictions. My web site is semi-liquid. If viewport is sized below 900px, a horizontal scrollbar will appear.
Elastic sites resize text and images proportionally (Ctrl++ or Ctrl+-)which some people like. Personally I prefer being able to resize text only in my browser without it affecting page and image dimensions. That said, elastic layouts can work well for sites heavy in graphics. Example of Elastic Layout
Fixed-width, centered layouts are the most convenient to work with. I think that's why so many web sites use them (Google, Yahoo, MSN, CNN...) The trick is finding the "right width" for your target audience. For most desktop and laptop users, 900 to 1100px is probably a good range. For mobile devices, 300 - 480px is a good range.
Below is an example of a desktop layout that changes to a handheld layout when viewport is resized below 480px.
To see it work, use a non-IE browser.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
I hope this helps answer your question.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
3. Re: How to prevent a horizontal scroll bar from appearing?
TCarp Oct 3, 2010 3:25 PM (in response to mahendra rajeshirke)Excellect. Thank you
Tom
-
4. Re: How to prevent a horizontal scroll bar from appearing?
TCarp Oct 4, 2010 11:20 AM (in response to Nancy O.)Thanks Nancy
I get good understanding from articles, etc. but eventually my learning style needs to try things. To that end I set up a very simple web page to test some setting and see the results.
I use 3 nested divs: body, wrapper, and container. (Later I'll add multiple divs withing a block).
I set body's width to 900px and the widths of wrapper and container to 40% each. I also put a border around each to see things better.
If I reduce the browser window width slowly I get a scroll bar at the point where the window width falls bellow the body width (900px). That helps. But what I also noticed was that there's a point in reducing the browser window where any further reduction is stopped (I'm guessing around 600px).What is setting this "stop point"? I changed the width settings for wrapper and container but that doesn't make things different.
Tom



