Table of Content:
- The Issue in Detail
- Centering the Right Way
- Centering the Wrong Way
- One Right and One Wrong Equals Compatibility
- The Good News
Centering Designs with CSS
One of the more frustrating aspects of CSS is centering our fixed designs effectively on the page. I know this because it’s a question people ask me quite often—and in fact the idea for this article came from a reader concerned about how to do just this.
While CSS offers a logical means to center designs, the problem is with browser implementation. No surprises there! It’s more than a bit frustrating because with table-based layouts this was a no-brainer. We’d simply use the align="”center”" attribute to center the containing table, and the entire layout would then be centered.
So how do we achieve the same effect in CSS? The good news is that we can. The bad news is that to center our content effectively, we have to employ a workaround in order to support multiple browsers. The good news is that the "hack" will display centered designs in all kinds of browsers, including Netscape 4.x, which is pretty cool.
molly holzschlag
Coined "one of the greatest digerati" and deemed one of the Top 25 Most Influential Women on the Web, there is little doubt that in the world of Web design and development, Molly E. Holzschlag is one of the most vibrant and influential people around. With over 25 Web development book titles to her credit, Molly currently serves as Communications Director for the World Organization of Webmasters.
As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. She also teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column, Integrated Design, for Web Techniques Magazine for the last three years of its life, and spent a year as Executive Editor of WebReview.com.