Horizontal alignment, HTML, CSS, standards, your browser - and you.

You'll often see things...

Cascading Stylesheets (styles, for short) will do this easily using the text-align property.

text-align works wonders for inline elements (opposed to block elements, such as div and table).

In the following example, there's a 100 pixels-wide div block (in green) that's inside a 300 pixels-wide div block (in red). The red block tries to center the green block using text-align:center.

Here's where the funky shit starts to hit the stainless fan.

If you're presently using Internet Explorer, you're seeing what you'd expect to see (using common sense):

• The text-align command has propagated to its children (what's inside the green div is also centered because its parent is centered.
• The green block is centered

If you're presently using Firefox, you're seeing what you'd expect to see (providing you're aware of how the standard works):

• The text-align command has propagated to its children (what's inside the green div is also centered because its parent is centered.
• The green block sticks to the left. Because it's a block and not an inline element (such as span or the anchor (a) tag.

And thus is born the frustration that comes with cross-browser development. I'm not for or against how Internet Explorer's or Firefox's implementation. This post is not about that.

I 'll save the philosophical debate about this for a later article - let's get back to the point of horizontal alignment. (Oh and the above, centered block of text is done using the technique I'm about to describe...)

Is there a cross-browser, standard way of doing this alignment thingie?

The first thing that might come to mind is to turn the child div block into an inline element (using display:inline;.

You most likely don't want to be doing this. Turning a div into inline effectively turns in into a span. And if it's a span you want, then you should use a span - and not have this whole alignment problem.

There's another workaround. And it involves margins.

The real, actual, profound, technical reason the div won't center is because its margins won't allow it to. You've got to reach into these margins (the left and right ones) and teach'em the way!.

That magic is done by telling the left and right margins to use their auto setting.

See? Now the inside block is centered. Its left margin pushed it the right way for it to be centered! And you get the same results for both browsers!

But there's a drawback. You'd kind of expect it to align right if you switch the red block's text-align from center to right. Wrong.

Wrong. Wrong. Wrong.

Unless you're using Internet Explorer.

Who implements using common sense.

Using Firefox, your green box remains centered but it's content's alignment changes.

If you would've wanted a surefire cross-browser way to align right, you'd use another variation of this technique, which I'll dub the "weird-ass technique".

Voilà: cross-browser right-alignment. How did I do it?

The technique I used tells the outer block (the red one), to use text-align:right. Makes Internet Explorer happy.

Then, the inner block (the green one) as margin-left:auto. Notice something? No margin-right!. That uses the standard telling the block : "Hey yo, biatch. Have a big margin on ya left. No stinkin' margin on the right to cramp your style and force you to be centerd".

The bottom line

Standards want you to use margins to center blocks. If you don't know the proper placement (or, like me, feel you shouldn't have to describe your design in terms of pixels), you can have the margin duke it out by setting'em both to auto, which'll center them - or set only the left one to align to the right. Setting a margin only to the right is the same thing as having no margin.

Internet Explorer, on the other hand, implemented a much more intuitive method. Which uses the same text-align tags you were used of. Only it centers something else than text.

If you want to be pissed at Internet Explorer's implementation, please be pissed because the margin implementation is non-standard. If you're pissed because they augmented text-align's reach (which I believe is a very cool addition), then you and I don't agree on how standards actually progresses: on the field.

Update

Following Patrice Lévesque's comments, here's an update on the subject of standards and text-align.

1 - The main reason to be pissed at Internet Explorer, regarding horizontal alignment of blocks remains the fact that Internet Explorer does not follow the margin standards. This sucks to no end and will remain sucking until it's fixed and two or three generations of browsers come to pass.

2 - The "augmentation" to the text-align standard from Internet Explorer can be very annoying. After all, text-align is expected to work only on... text. However, I do maintain that this is a great big deal more intuitive than the margins. It took me quite some time, back in the days, figuring out why it didn't work on other browsers.

It can be argued, with pretty strong, valid and good arguments, that it's not an "augmentation" of the standard, but it's rather "breaking" the standard. Which brings forth the question: is the boost in intuitivity (is that even a word?) worth the breaking of the standard.

Once you learned that "text-align" applies to text (or inline elements) and that block elements are not text, the text-align standard makes a lot of sense. I would've liked to see an extra property such as "block-align:right" (and I'll get to that on later articles). But the standard went the way of the margin - which also makes some kind of sense. Just not the intuitive kind of sense.

If centering would've been achived by setting "margins-horizontal:center" or something like that, intuition would've played a great role in understanding. "margin-left:auto;margin-right:auto;" feels more like a trick you've got to learn. No clues about what this'll do. I would never have figured that out without finding articles on "how to center blocks" that came up on google.

But now, I'm at criticising the standards, which I'll keep for later subjects.

Let it just be said that I place great value on intuitive standards.