A blog about Ruby, Rails and other Tech. Mostly.

27th Oct 2005, 7:29am

Centering content with CSS while allowing absolute positioning

It turns out to be quite hard to center a site with CSS whilst retaining the ability to position things absolutely relative to the centered site edges.

I've only found one way to do it - to stick a div around the content, and define its class something like this:

.main {
  position: absolute;
  left: 50%;
  margin-left: -332px;
  width: 664px;
}

This will place a width 664px wide content area in the middle. And absolutely positioned elements inside this will work.

Other methods of centering, for instance as described here, do not allow for absolute positioning within the centered content (and browser differences thwart attempts to make it work).