Posted by & filed under Developer Blog.

I ran into an interesting problem yesterday while building a simple web page. I needed to cause the main image at the top of the page to do two things: 1) Be centered on a liquid layout page, so that no matter what size the window the image was centered. 2) "Float" above the design on it’s own z-index.

Of course to get the image to be on it’s own layer, it must be set to position:absolute; but once you give it an absolute position it loses all references to being centered.

I thought I had the solution at one point, until I tested it in IE and it was all wrong. After a few hours of struggling, I finally came up with what now seems like a simple solution:

Adding styles to the image itself was my mistake. In this case I had to wrap the image with a div and give it an id. I then applied the following styles to that div in my stylesheet:

#image {
  width: 100%;
  text-align: center;

The image itself doesn’t need any other styles.