Tutorials
How to absolute position an object relative to the inside of a center aligned container.
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>