Using Auto Margins with Multiple Columns to Center DIVs with CSS
(Page 1 of 4 )
You may think that building centered web page layouts with CSS is an annoying experience, but guess what? This article series just might prove you wrong. It explains several CSS-based methods that you can use for constructing these kinds of designs very quickly, which should put a big smile in your face as soon as you start working with them. This article, the fifth one in the seven-part series, expands our use of the auto margin.
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!
Next: Building a centered web document layout with CSS auto-margins >>
More Style Sheets Articles
More By Alejandro Gervasio
