Problem:
My web page is too wide to fit on the Screen and I have to scroll left and right to see it all.
Cause:
There is something in the page which is wider than the browser window. This forces the browser to use horizontal scroll bars so the user can move from side to side.
Note: Although there may sometimes be a legitimate reason to create a page like this, it is generally considered bad design.
Solution:
First of all, be clear about how you are designing your page width. There are three options:
- Fixed Width: The page width is static - the contents always retain the same width and layout. If the browser window is smaller than this width, you will get horizontal scroll bars. If the browser window is wider, you will have blank space to the side(s) of the content.
- Dynamic Width: The width of the page changes to fit the browser window, and content within the page re-arranges itself accordingly.
- Hybrid: The page width is dynamic up to a point - once a certain width is reached the expansion stops and the page width remains the same. Although this includes the best of both worlds, it is more difficult to implement and is more problematic than the first two methods.
Once you know what you want to achieve with your page width, find the page element which is too wide and reduce its size to fit within the desired browser width.
In most cases the offending element is a table which has been give a fixed pixel width, e.g. <table width="1360">. This is particularly common when working with WYSIWYG editors which allow you to resize tables by dragging the edges. Check all tables in the page and choose one of these options:
- If you are using a fixed width page design, reduce the table width to less than the page width.
- If you are using a dynamic page design, set the table width to a percentage instead of fixed width, e.g. <table width="90%">
If the problem is not being caused by a table you'll need to find out what it is. One possibility is an image - it should be fairly obvious if this is the case. Otherwise look for <div> and <span> tags which could be the culprits. If all else fails, cut all of the page content and paste it into a temporary file. Then add it back bit by bit until you identify the cause.