Home arrow Style Sheets arrow Using Auto Margins with a Liquid Layout to Center DIVs with CSS
STYLE SHEETS

Using Auto Margins with a Liquid Layout to Center DIVs with CSS


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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
April 09, 2009
TABLE OF CONTENTS:
  1. · Using Auto Margins with a Liquid Layout to Center DIVs with CSS
  2. · Getting started using auto-margins with a liquid design
  3. · Working with CSS auto-margins
  4. · Merging the presentation and structural layers into one single file

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using Auto Margins with a Liquid Layout to Center DIVs with CSS
(Page 1 of 4 )

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. 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials