Everything In Between

If your project so much as pretends to have a profit motive, I will tell you to go fuck yourself and your project.

Centering, Absolute Positioning, and Document Flow

3 comments

The question of how to center an absolutely positioned element came up recently in a CSS forum I frequent. It’s a relatively old question that has several answers, but it’s been asked often enough imho to warrant a short discussion. CSS has given Web Designers a powerful tool to create breathtaking layouts. However, some things in CSS have necessitated a change in our workflow. Centering is a great example of such a change.

Two Forms of Centering in CSS

There are two kinds of centering that CSS can accomplish, independant of each other. One kind is center-aligning text, achieved through the use of the text-align property. The other is centering an entire block, and not the text within that block, inside its containing element. We’ll be talking about the latter.

Centering a Block-Level Element Using the Document Flow

In CSS, to center an element horizontally within its containing block its left and right margins must be set to auto. This will make the element’s left margin length equal to the length of its right margin, thus keeping the element in the center of its parent. For example, you might center your main content div like this.

div#content {
    width: 600px; margin: 0 auto;
}

(The width is necessary; it has nothing to do with being centered, but if you leave it out the div will be as wide as its containing block and will not have any margins to speak of. The margins are what cause the centering effect.)

This will work because the main content div is in the flow of the document. That is, its margins are “pushing against” their parent, so they affect the layout of the div.

Taking the Block Out of the Flow

But what happens if we take the div out of the flow, with, say position: absolute;?

div#content {
    width: 600px; margin: 0 auto;
    position: absolute;
}

Suddenly, we find that the div is no longer centered. This is because we’ve taken it out of the document flow, out from within its parent element, and now its margins have nothing to push against. So how can we center this element?

Centering the Absolutely Positioned Box

The trick is to use its positioning to center one edge of the div, and then use margins relative to its width to push it into center-alignment. Thus, you can center any absolutely positioned element that has a fixed width by giving it, for example, left: 50% and then adding a negative margin-left equal to half of the element’s width. (You could also use right: 50% and then use a negative margin-right value.)

div#content {
   width: 600px; margin: 0 0 0 -300px;
    position: absolute; left: 50%;
}

Now the content div will be centered horizontally in the browser viewport, and it will stay centered even on a window resize.

Written by Meitar

November 20th, 2004 at 2:08 am

Posted in CSS,Web Design

3 Responses to 'Centering, Absolute Positioning, and Document Flow'

Subscribe to comments with RSS or TrackBack to 'Centering, Absolute Positioning, and Document Flow'.

  1. I am seeking a method for achieving effective psitioning of figures in an arithmetical column. e.g.

    123.00
    246.00
    .33
    1.07.

    Is there some way to set the margins for the .l. 10.,100., 1000, 10.000 postings in columnar form? the old fasioned typewriters used to have the tab keys, what does this modern system have to be equally effective without all the involved jazz?

    Kures

    1 Dec 04 at 2:03 PM

  2. Absolutely. CSS can do this, too. The text-align property can take an arbitrary string value when applied to table cells, such as a decimal point, that will make the textual content of those cells line up along a vertical axis of the string specified. This is better explained with an example, and the usual caveats about non-conforming user agents apply.

    Meitar

    1 Dec 04 at 11:01 PM

  3. The latter example seems a proper one, but raises problems when the div is bigger than the screens resolution.
    F.e.: designing a website at 1024×768 generates a problem if you only have 800×600.
    On the left and right side a part wil disappear. The right part can be accessed using yor scrollbars, but the left part remains unaccesible!

    Albert

    22 Dec 04 at 8:27 AM

Leave a Reply