I wrote this article about 2 years ago. Our creative department at work ran into this problem last week, so I’ve decided to republish the article in blog format. The title is a mouth full, but I think it sets up the tutorial appropriately. 🙂 Enjoy.
Introduction
Horizontally centered websites have long been extremely popular. However, positioning an element using “position:absolute” in a center aligned website can be tricky. This tutorial walks you through the process using only CSS, and without the use of tables or complicated image splicing.
Why would you want to use absolute positioned elements in a center aligned layout? Such a technique allows you to place an image or navigational button on top of your current design. I use this technique on gnourg.com.
Unfortunately, an element that is absolute positioned in a center aligned container does not maintain its position relative to its container. Instead the absolute positioned element maintains its position relative to the window. This has the potential to blow the sites intended layout.
-Click here to view an example of the problem.
Hint: resize the window’s width.
Fortunately there is a solution to this problem.
Setting up our scenario
We use an image as our element to absolute position. But before we can position our image, we must create our center aligned container.
To center our website we create a div wrapper that contains all of the elements in the website, including our absolute positioned image. The CSS for our div wrapper appears as follows:
#wrapper {
margin: 1px auto;
padding: 0;
border: 2px solid black;
width: 580px;
height: 300px;
}
Placed in our HTML, including all of the proper definitions, it looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Absolute positioning tutorial.</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<style>
#wrapper {
margin: 1px auto;
padding: 0;
border: 2px solid black;
width: 580px;
height: 300px;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
Putting in the image
Our goal is to absolute position our image 200 pixels from the left border of our div wrapper and 30 pixels from the top border of our div wrapper. It will hover over any content beneath it.
We start off by simply placing the image in our div wrapper as follows:
<body>
<div id="wrapper">
<img src="sample.gif" height="50" width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>
It is important that we place our image tag first inside the div wrapper, before any of the page’s other content.
Now we absolute position our image so that it does not take up space on our page. This should place our image in the upper left hand corner of our div wrapper, on top of our content. The CSS for this looks as follows:
<body>
<div id="wrapper">
<img src="sample.gif" style="position:absolute" height="50"
width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>
Final position
Now that our image takes up no space, and because it is placed before any of our page’s other content, it sits nicely in the top
left hand corner. From here we move our image by putting it in a div box and using relative positioning. It looks
like the following:
<body> <div id="wrapper"> <div style="position:relative;top:30px;left:200px"> <img src="sample.gif" style="position:absolute" height="50" width="100" alt="our img" /> </div> This text is sample content that we want to start in the upper left hand corner of our site, behind any absolute positioned elements. </div> </body>
Eureka, we have our absolute positioned object positioned relative to the inside of our center aligned website.
-Click here to view the final product.
Don’t forget to try resizing the window’s width.
This method has been tested in IE 5, IE 6, Netscape 6, and Mozilla 1.6. If you have any questions, corrections, or additions please drop me a comment.