Using Auto Margins with a Liquid Layout to Center DIVs with CSS
(Page 1 of 4 )
Often, when building a web site, web designers must construct centric layouts with CSS. While accomplishing this task requires only familiarity with the basics of style sheets and (X)HTML, building layouts like these can be challenging, particularly for beginners. So, if you’re interested in learning different CSS approaches that permit you to create fully-centered web page layouts without suffering premature hair loss, keep reading. This is the fourth part of a series of articles that shows you how to center DIVs with CSS.
Introduction
This series shows you, with the help of numerous code samples, how to construct centric web document layouts very easily by using a group of proven CSS techniques. Now that you've been introduced to the main subject of this series, it’s time to summarize the topics that were treated in the previous tutorial, in case you missed it for some reason. In that article I explained how to build a fully-centered web page layout by using CSS auto-margins.
Despite its seemingly-complex name, this technique is quite simple to implement. It consists of placing a DIV at the center of a web document by assigning a value of “auto” to its respective left and right margins.
Indeed, CSS auto-margins allow you to center DIVs very easily, and additionally, can be used for building both fixed and liquid designs. Taking into account the inherent flexibility offered by this approach, in this fourth part of the series, I’ll be discussing how to construct an elastic, centered web page design by means of auto-margins.
So, if you wish to master this CSS technique in a truly painless way, click on the link that appears below and keep reading.
Next: Getting started using auto-margins with a liquid design >>
More Style Sheets Articles
More By Alejandro Gervasio
