Tutorials
How to absolute position an object relative to the inside of a center aligned container.
Introduction
Horizontally centered websites have long been extremely popular. Sites such as alistapart.com use such a design. 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. Read on.