Date: 09/04/07 (WebDesign)    Keywords: browser, css, web

So, I have made a few sites lately that require a little CSS workaround so I can get absolute positioning that is horizontally centered.

What I have been doing to achieve this is to create one div, with a width of 100%, and I absolutely position it to whatever position I want it to be on the page, vertically (top: 68px, or whatever). Then within that div I place a second div for my content, specify a width, and set the margins to auto. Voila: centering.

I have been wrestling with something bizarre on my latest website, however (and unfortunately, it's not online yet for me to show you the code). Despite the fact that none of my elements are wider than the window size, a bottom side-to-side scroll bar appears, and my theoretically centered items are moving side-to-side. Very slightly--no more than 25 pixels or so. (And this happened both in Firefox and Safari; I have not yet tested it in a Windows computer.)

I had a sneaking suspicion this may relate to my background image, which is 800px wide and therefore possibly wider than my window--however, when I moved the window so that part of it was offscreen and resized it to a gigantic width, the problem remained. Also, why would a browser use the background image as a basis for percentage widths, and not the window itself? So, question one: what do you think is making this happen?

To continue with my story:
A not-very-helpful fix was to set my parent div to 95%. This completely eliminated the problem of it moving around, but of course, threw off my centering. However, after restoring it to 100%, on a whim, I changed the positioning from absolute to fixed. Everything is now working fine in both browsers?

What's the story on this? I have read that fixed positioning is less all-around compatible with different browsers than absolute positioning... But I'm realizing, as I write this, that I don't fully understand the difference between fixed positioning vs. absolute positioning. In what instances would you use one instead of the other, and why? And why do you suppose my particular content is working properly in fixed, but not in absolute, position?

Disclaimer: This is really less of a "help me with my code" question and much more of a "give me your input on fixed and absolute positioning in general" question. So if you're going to say, "post the code and I'll tell you what's going on," and nothing else, don't bother about it--If I still have a problem later, I will post the code, but right now I'm more interested in hearing general thoughts. :)

x-posted to web_design.

Source: http://community.livejournal.com/webdesign/1305227.html