ANSWERS: 1
  • Having your web page bleed off the screen with horizontal scrollbars is a frustrating problem, even when your CSS is correct.

    Margins and Padding

    In CSS, margins define how items are spaced, while padding makes space inside the item. Set all margins and padding to zero, then gradually increase one to identify the problem.

    Image Size Greater Than Width

    An image larger than the browser width set by CSS can create horizontal scroll bars. You may need to move the image or resize it in a program such as Photoshop.

    Screen Resolution

    If you set the width of your website to 1000 pixels, but your screen resolution is set to a smaller width, say 800 pixels, then your browser window will have to scroll.

    How Do You Change Screen Resolution?

    On Windows, right-click on the desktop. Click on "Properties." Click the "Settings" tab. Under "Screen Resolution," move the slider to raise the resolution. On OS X, click on the Apple menu. Choose "System Preferences." Click on "Displays." Choose the resolution.

    Using Tables to Contain the Design

    Instead of using tables for layout, use a CSS-based elastic design that changes with the size of the browser window and screen resolution.

    Overflow:Hidden

    Using "overflow:hidden" in the CSS for your <body> tag may solve the problem.

    Source:

    Top Ten Web-Design Mistakes of 2002

    Horizontal Scrolling Must Die!

Copyright 2023, Wired Ivy, LLC

Answerbag | Terms of Service | Privacy Policy