Menu
I have: I have several web pages both with this outline:
<body>
<div id="container">
CONTENT
</div>
</body>
with the CSS:
body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}
Problem: All pages are short so that no scroll bar shows up, but one page is longer so a vertical scroll bar on the right shows up. This second page causes the container to be shifted (to the left) just a bit.
From what I understand a common solution is to make the scrollbar show up on all pages, but I really want to avoid that since it is just one page out of many.
Question: Is there a way to avoid shifting the container while still having it centered without making the scrollbar show up on all pages?
244
People with large monitors will never see a scrollbar on any page.
People with small monitors will always see scrollbars on all pages.
Despite monitor size, people are free to make any browser window any size and cause scrollbars.
Oh and let's not forget about people that like to add a dozen browser toolbar addons making the browser window's content area half as high as it could be.
That's just how it is and no static solution is going to get around that. Changing the margin on one page is not a solution for reasons listed above.
If you insist on fixing something people have learned to live with, it's going to have to be a "dynamic" JavaScript solution where you calculate your left margin and add the width of the scrollbar. For different browsers, bars are different widths so you will have to calculate this too.
Edit: Like someone said in another answer, this is default browser behavior and should be left alone.
Edit2: As user dampe said in comments, you'll also have to trigger the JavaScript after each time the window is resized by the user.
This is going to be an epic waste of your time. Typically, default behavior of the browser is left to the browser. Way too many variables to account for and you're bound to miss something if you don't have every scenario, skin, OS, browser version, browser brand, toolbar add-on, monitor type, size, etc. to be testing with. Once you start getting this working, you'll find you need to make exceptions and corrections for Explorer. Before you know it, you end up with a massive piece of bloat... and for what? What's the value of this?
Starting point: 100% guaranteed expected behavior in all browsers & situations.
Ending point: guaranteed looking great in your monitor/system only... you take a risk that it will look like junk on a system/scenario you haven't even thought about.
Search for a pre-made JavaScript solution or a jQuery plugin first... if you can't find one, ask yourself why?
Edit3: I did some searching to satisfy my curiosity. I found a thread with a jQuery solution as well as links to methods for calculating the scrollbar width.
IMHO, this is a waste of time and resources but here's the link for anyone interested...
http://expressionengine.com/archived_forums/viewthread/158703/
Edit4: Here's a CSS solution that I found. I have not tested this but if it works it would be sweet.
html {
overflow-y: scroll;
}
http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem
Edit5: CSS solution works but not to my liking. It creates scrollbars for every page yet when not needed they are grayed out or empty... not elegant.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
