Seattle Web Design
Blog > Centering a Website While Using Absolute Divs for Content

Meet the author:
Jill Olkoski

Jill has a MA in Clinical Psychology, a BS in Computer Science, and a BS in Mechanical Engineering.

She currently owns Aldebaran Web Design in Edmonds (near Seattle WA) and enjoys educating her clients on topics related to small business website design.

In Jill's previous life, she spent 17 years in the engineering and quality organizations of a Fortune 100 tech company.

 


Centering a Website While Using Absolute Divs for Content

May 27th, 2009

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!

Jill
--------------
J. Olkoski
Aldebaran Web Design, Seattle
Jill Olkoski has a BS in Engineering, a BS in Computer Science and an MA in Clinical Psychology. She delights in using her advanced technical and psychological skills to help small business owners develop cost-effective and successful websites.



One Response to “Centering a Website While Using Absolute Divs for Content”

  1. James John Malcolm Says:

    You’re welcome!



 ©2006 - © Aldebaran Web Design Seattle, A DBA of Aldebaran Services LLC
Search Blog Articles: