Home arrow Style Sheets arrow Building a Liquid Design with Evened Margins and Centered CSS DIVs
STYLE SHEETS

Building a Liquid Design with Evened Margins and Centered CSS DIVs


If you’re a web designer who wishes to learn how to build fully-centered web page layouts using CSS, you've come to the right place. Welcome to the final installment of a seven-part series on centering DIVs with CSS. This series shows you how to take advantage of the functionality provided by different DIV alignment techniques to construct centered web page designs, which can be incorporated into any existing site with minor effort.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
April 30, 2009
TABLE OF CONTENTS:
  1. · Building a Liquid Design with Evened Margins and Centered CSS DIVs
  2. · Constructing an elastic web page layout with evened CSS margins
  3. · Centering DIVs with evened CSS margins
  4. · Completing the development of the centered layout

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building a Liquid Design with Evened Margins and Centered CSS DIVs
(Page 1 of 4 )

Introduction

Now that you're aware of the main goal of this series of articles, it's time to review the topics that were covered in the last tutorial. As you'll recall, in that particular installment I constructed a fixed, centered web page design by using a CSS technique called "evened margins."

In simple terms, this method permits you to center a selected DIV simply by assigning the same values (in percentage, pixels, ems, etc.) to its left and right margins respectively, which causes the DIV to be positioned in the middle of a web document.

Indeed, evened margins can be considered one of easiest approaches to implement nowadays, when it comes to building centered layouts. And best of all, this technique is supported consistently by most modern browsers.

Nonetheless, as I said before, the use of evened CSS margins allows you to work indiscriminately with fixed and elastic designs, due to its intrinsic versatility. Therefore, this final article of the series will be aimed at demonstrating how to utilize this approach for building a liquid web page design, thus completing this introductory guide to using a few popular DIV-centering methods.

With the preliminaries out of our way, it's time to tackle the last chapter of this educational journey. Let's go!


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 6 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials