Many of the people who view my websites aren't very into computers so I like to use a container div that is 770px wide so the full width will show on a 800x600 screen. I also like to center the container (right and left margins auto) so the display looks nice on a larger screen. This works well with IE because there is always a vertical scroll bar even if it isn't needed.

The problem is with Firefox the vertical scroll bar comes and goes depending on the vertical size of the page. I find this annoying and suspect others do too. I suppose one could force the container to be very tall even if it is not all used but that seems like a bad idea.

Any suggestions for a solution to the Firefox problem would be appreciated.
 

Curious, if I see a vertical scroll bar, I assume there is more on the page and scroll down. I guess I never really notice if there is a scroll bar or not. And I certainly would not want to force the vertical height just so there would be a scroll bar. Just my two cents.

 

pat 

Pat,

Here's an example http://springcourt.info/49-53/index.htm

And here's the not very nice fix http://springcourt.info/49-53-test/index.htm

Is there a better way to keep the container centered in the larger display? I suspect it could be done with some javascript but I would like to do it with CSS.

Dave

 

Very rough but I would do something like this http://www.the-gearys.com/dave/

The top masthead is one graphic image http://www.the-gearys.com/dave/dave-logo.jpg 

 Resizes with no horizontal scroll.

This was a css layout I did for a group. You are welcome to play with them http://www.genealogy-web-creations.com/css-layouts/ 

Is this what you are looking for??

 

pat 

I'm not sure what the first example shows me. My problem is not a requirement for horizontal scrolling. I'm trying to center a fixed width (770px) div in all windows 800px wide and larger. Because Firefox doesn't show a vertical scroll bar when it isn't needed the div moves horizontally for different pages depending on the vertical size of the content.

In your last example the content always fills the window horizontally which sort of solves the problem but then you have to figure out how everything will print and make pages that display nicely at different widths. I would prefer to have a constant width.

I suspect with my desire to keep a constant content width means I'm stuck with the Firefox problem. 

Sorry Dave, I guess I am not understanding what you are trying to accomplish other than having a vertical scroll bar in FF when it is not needed.

pat 

Well... I guess that is correct and probably unreasonable. I would like the page content to stay in the same horizontal location for all pages. I assume you have looked at it in Firefox to see what is bothering me.

If you look at the three pages in IE the div container stays in exactly the same horizontal location. If you look at it in Firefox the div container moves horizontally depending on the vertical size of the content, ie when the vertical scroll bar is present or not. Since the center of the usable window changes the div moves. I guess I'll complain to Mozilla :-)

Yep, I did look at it in Firefox but would be more concerned that on my computer, your background color is a vile pink and on Tina's is probably a vile green as your background color is not configured. http://blog.family-genealogy-online.com/2007/05/14/background-colors/

 

In IE 7 on my laptop there is no vertical scrollbar nor in Opera at least for the main page. Sorry, wish I could help.

 

pat 

Whether or not to force a scrollbar on Firefox is a topic that has been debated many places. Some people don't like the movement when no scrollbar is present and the content isn't enough to force one in Firefox (IE always reserves space for it). My view is it comes down to personal peference. I'd rather add content than hack but some of the options to force a scrollbar included:

html {height: 100%;}
body {min-hight: 600px;}

Pat,

You must have some different option setup in IE7. The space for the scroll bar is always there even if the scroll bar isn't active. Hence the difference between the active window width in IE7 vs Firefox for short vertical contents.

Thanks for working with me on this. I guess Cheryl's comment pretty much puts an end to the discussion.
 

Hi, Dave:

I don't think it's too big of an issue. Most newbies to the Internet use Internet Explorer, and even for the ones who learn on Firefox (my dad's a big Firefox evangelist), they'll probably be used to seeing layouts move back and forth from lack of scrollbars, so they won't even notice that your site does the same. Opera does the same thing, as does Safari for Windows, so I don't think it's necessary to have to add more to your CSS to prevent something that really isn't that uncommon.

Cheers