Recent Entries

Horizontally Centered Absolute Positioning

CSS offers the ability to take an element completely out of the regular document stream and position it in an arbitrary spot within the browser window. This is great news for people wanting the extra control, provided they’re content to use the left or right edge of the browser as a starting point. Up till now, there has been no way to absolutely align content to a horizontally centered axis in the window.

Consider example 1. We are trying to position a yellow div within a 500 pixel wide centered baby blue div. However, there is a body of text between the two which is theoretically being pulled from a database. We have no way of knowing how large this text area will be, so relative positioning will not work.

In example 2 we’ve used absolute positioning to align the yellow div to the right of the window, and offset it by 200 pixels to roughly position it within the blue div. This assumes the window is a certain width, and if we start resizing it we quickly realize that the yellow div will not stay in that spot long.

Were we to try aligning the div to the left side of the window, we’d experience much the same result. The problem is that the blue div has variable margins in order to center it, so the left and right edges of the div are never a set number of pixels away from the left and right edges of the screen. Unfortunately, this is exactly what absolute positioning does, so the two are seemingly incompatible.

The way we’ve chosen to center the blue div is the key here. By setting the left and right margins of a div to auto, it will be horizontally centered within its containing element.The blue div, #div1, is created with the following code:

If we assume that the background is transparent, give the div a width of 100%, and position the div to the top left corner of the browser window, then theoretically we can center anything inside it the same way we’ve centered the blue div relative to the document’s body.

That means that we’re going to start treating the p inside the div as a secondary div. Currently in our second example, the yellow div, div3, looks like so:

The first thing we need to do is move it to the top left corner, then we’ll want to remove the width constraint so that it spans the whole window. Secondly, we’ll remove formatting and create a new definition for the p sitting inside our div. A bit of hacking, and our code looks like this:

Well, as you can see in example 3, we’re a bit off. But if you scale the window, you’ll notice the yellow div isn’t moving anymore, so we’re mostly there. It’s currently dead centre, which isn’t quite where we want it. We’ve run out of elements to modify, unfortunately, since we can’t add padding to the div or adjust the margin of the p. We’ll have to throw a span in the HTML itself to compensate, then we’re free to add our final tweak to this span.

And as you’ll see in example 4, we’ve got it. The caveat is that this method relies on the margin: auto method of centering, which IE5 doesn’t seem to like. There’s a workaround using text-align which is fully adaptable to this method. View example 5 for an IE5–friendly version complete with text-aligns. Alternatively, example 4 aligns to the left , but doesn’t otherwise break the intended layout, so you may deem this acceptable for IE5 users.