We help IT Professionals succeed at work.

How to remove Horizontal scroll bar ?

ee-itpro
ee-itpro used Ask the Experts™
on
I'm using a #wrapper set to width:1000px for a site in development.  I am designing this for the standard 1024*768 resolution and setting the wrapper to 1000 px  so that the user doesn't have to scroll horizontally.  However, it still displays a horizontal scroll bar.


I tried to see if there were any unclosed div's etc. ... but can't figure out what's the reason for the scroll bar displaying.


I'm attaching both the index page and the associated css  stylesheet.

Hopefully someone can help me out fix the horizontal scroll bar.
index.php
style.css
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
put this in the css:

overflow-x: hidden;

this will prevent the scrollbar to show up

Author

Commented:
i don't want that if the content extends beyond the width then it shouldn't display.... i want the fix so that the page width is limited to 1000px  for a 1024*768 resolution.

Author

Commented:
Please assume the  associated stylesheet is there inside the head... I wa trying out a few things and skipped linking it back while saving.

<link rel="stylesheet" type="text/css" href="<?php echo $script_url; ?>/style.css"/>
could you please share the URL of the web or rendered source (from view source with images) with me, as index.php code is not complete and the page can not be seen on web browser....hence not able to provide the correct solution for your issue.

thanks
block elements that exceed your container bounds will either:
1. lead to that scroll bar being displayed (overflow:auto or overflow:scroll), or
2. trample over the container limits (overflow:visible), or
3. not display at all (overflow:hidden).

The problem isn't the container, it's the content.
If your content is (display:inline) or (display:inline-block), then it will wrap inside the container's width

Author

Commented:
Solved.  The issue was with #Content { width:100%; padding-left:3%; padding-right:3%;) ... this extended the width beyond 100% of what's available leading to Horizontal scroll bar.


Thank you both for helping out.