An Evened Margin Approach to Centering DIVs with CSS

When it comes to creating centered web page layouts with CSS, things can get really interesting indeed, since this process can be tackled by means of several approaches that present a friendly learning curve.

Ranging from using the CSS “text-align” property, to working with evened margins, there are plenty of solutions currently available for creating centered designs, and most of these techniques are cross-browser compatible.

Nonetheless, learning how to use all these CSS approaches in concrete situations requires a bit of theory and lots of practice. Thus, if you’re seeking a guide that walks you through creating centered web page layouts by using only a few simple CSS styles and basic markup, then this group of articles might be what you’re looking for.

Of course, if you already read all of the preceding tutorials of this series, then hopefully you’ll be familiar with utilizing some CSS properties for quickly constructing centered designs. Speaking more specifically, in the previous article I explained how to implement this kind of design when working with a web page comprised of three main columns.

In that case, the whole web document was centered via CSS auto-margins, that is, by specifying a value of “auto” for the left and right margins of a main wrapping DIV. It was that simple, actually.

Nevertheless, there’s a down side to using CSS auto-margins: Internet Explorer 6 and below will render them incorrectly when used in Quirks Mode. Obviously, this issue may very quickly break a web page layout that relies on this approach, so it’s necessary to look into another DIV-centering method that offers cross-browser support.

Here’s where evened margins come in. It’s feasible to center a DIV on a web document by assigning the same values for its respective left and right margins. This method is supported pretty well by many modern browsers, including Internet Explorer.

Therefore, click on the link below and roll up your sleeves. We're about to get to work!