Every once in a while, I run into an issue and get ready to bang my head on my desk. But today, just before I did that, I Googled a problem I was having and was so very delighted with the solution I found, I wanted to give them a link with thanks.

The name of this article is “On Horizontal CSS Centering using Absolute Positioning or how Relative Positioning can rock your css.”

In this case, I had a client’s website where they wanted these overlapping regions of content, so I had to use DIV’s to make this happen. I used the “z-index”, which worked just like it was supposed to, even in Internet Explorer.

But if you use this method, you run into an issue if you use “relative” positioning. You have to use negative “top” numbers to push up the overlapping divs, which naturally fall to the bottom. This leaves these big regions of emptiness at the bottom of the page, which looked terrible. So I changed to “absolute” positioning and was able to use normal, positive “top” values.

My next problem, is that my client wanted her website centered. But using “absolute” fixes things on the page, so that when you stretch your window wider, everything stays put. I needed it to move and recenter.

So this is where this lovely blog article written by “Candy by James” comes to my rescue. I’ll reprint the part that was most useful to me:

.wrapper {
position:relative;
margin:0 auto;
text-align:left;
width:whatever;
}

For good measure, you’ll need to apply the IE fix:
body { text-align:center; }

Then he uses this for the content:

.content {
position: absolute;
left: whatever;
top: whatever;

width: whatever;
}

Change the body tag, create wrapper, and then content inside it, and it will magically auto-center while letting you use absolute divs inside. I’ve tested this on PC (Firefox, IE7) and Mac (Safari, Firefox) and it works like a charm. Thank you James!

If you found this article helpful, please take a moment to share it with your friends, it will be much appreciated. Thanks! Jill