Using Auto Margins with Multiple Columns to Center DIVs with CSS

Introduction

It's extremely easy to construct centered web documents by means of only a few simple CSS styles and basic markup. Surprisingly, they'll be rendered fairly consistently by most modern browsers -- yes, in this case, Internet Explorer isn't so sadistic as it usually seems to be. Best of all, you'll enjoy the copious code samples I've provided in this series of articles to walk you through creating a number of web page designs using some popular DIV-centering techniques.

And now that you've been introduced to the subject of this group of articles, it's time to quickly summarize the topics that were discussed in the last tutorial. In that article, I demonstrated how to build a centered, liquid web document design with the help of CSS auto-margins.

Basically, this approach is based on assigning a value of "auto" for the left and right margins of a selected DIV, positioning it right at the center of an HTML page. Simple, and quite effective too.

Though, as you'll surely recall, we used auto-margins in conjunction with a sample web document built to the "classical" form: a header and footer sections, and a single main column. It should be fairly instructive, therefore, to see how to use this same approach when working with a more complex document.

Thus, in this fifth installment of the series I'll be discussing how to build a centered web page layout using a multi-column design. So, are you ready to learn how this will be achieved? Then, jump ahead and start reading now!