I have designed several websites in the last few months, and they all are experiencing the same problem: The page layout is centered, but on some of the site's pages, the entire page jumps to the left horizontally about 5 or 6 pixels.
I have noticed this same problem on many large corporate sites, such as http://www.ibm.com, when I view the site in IE8 or Firefox 3.0.10. It's distracting to have the pages jump from left to right.
At my latest site design, http://www.rusasolutions.com, the home page displays correctly in Firefox 3.0.10, but when I click the Solutions link, the page displays slightly to the left of center. I have noticed this on some sites in IE 8 as well.
Here is my CSS:
/* standard elements */ * { margin: 0; padding: 0; } a, a:link { color: #2e6992; text-decoration: none; } a:hover { color: #6ca7d0; text-decoration: underline; } body { color: #666; background-color: #fff; text-align: left; background-image: url(../img/pagebg_dark3.jpg); font-family: \"Lucida Sans Unicode\", Verdana, Geneva, Arial, sans serif; font-size: 11px; }
p, cite, code, ul, ol { font-size: 1.1em; padding-bottom: 1.2em; line-height: 1.3em; font-family: \"Lucida Sans Unicode\", Verdana, Geneva, Arial, sans serif; }
/* robin added this to create three columns on the home page */ .home #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 228px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 25px 10px 10px 20px; /* padding keeps the content of the div away from the edges */ } .home #sidebar2 { float: right; /* since this element is floated, a width must be given */ width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 25px 10px 10px 20px; /* padding keeps the content of the div away from the edges */ } .home #centerbar { margin: 0 270px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #centerbar div's text to fill the sidebar spaces when the content in each sidebar ends. */ padding: 25px 0px 10px 15px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ } .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; }
<h1>SOLUTIONS</h1> <p>RUSA software solutions are simple to use, affordable, effective in managing your workload and able to support your goals of building relationships with your customers.</p> <p>Many small businesses are frustrated with off-the-shelf products that are targeted at medium-to-large size companies because they </p> <ul> <li>Are often too general in their application.</li> <li>Contain more functionality than needed.</li> <li>Require specialist resources to operate.</li> <li>Are too expensive to purchase and maintain.</li> </ul> <p>Our solutions offer a wide variety of meaningful reports and tracking systems served up by an intuitive interface that even the most computer-shy person will find easy to use. We pride ourselves in designing tools that are both functional and pleasant to use and consistently productive and efficient. We're experts in demystifying the management of information through elegant and intuitive interface design, useful automation, and crystal clear reporting, all of which both support and enhance your business goals. </p> <p>Our mission is to help you enhance your productivity, streamline your work flow, increase your profitability, and make informed decisions which creatively focus your skills through powerful, easy-to-use database management tools.</p> <p>Today you need to efficiently do you job with fewer resources. Software must enable you to apply your talents and attention to the core responsibilities of your business. Our solutions achieve this, so that you are more productive, empowered to utilize your full skill set, and are happier and successful.</p> <!-- end content area --> </div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class=\"clearfloat\" />
What's happening is a scrollbar appearing on the longer pages with more content. All you need to do is force a scrollbar to appear on all pages. Just add this to your css:
The page layout is centered, but on some of the site's pages, the entire page jumps to the left horizontally about 5 or 6 pixels.
I have noticed this same problem on many large corporate sites, such as http://www.ibm.com, when I view the site in IE8 or Firefox 3.0.10. It's distracting to have the pages jump from left to right.
At my latest site design, http://www.rusasolutions.com, the home page displays correctly in Firefox 3.0.10, but when I click the Solutions link, the page displays slightly to the left of center. I have noticed this on some sites in IE 8 as well.
Here is my CSS:
Here is the HTML for the Solutions page:
html {overflow-y: scroll;
}
Thank you so much for your help! I appreciate your expertise.