Tutorials
How to absolute position an object relative to the inside of a center aligned container.
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 to this tutorial please email Dusty at dusty AT dustyreagan DOT com.