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 {
position:absolute;
width: 100%;
text-align: center;
}
The image itself doesn’t need any other styles.