Home arrow Style Sheets arrow Page 3 - 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 - Working with CSS auto-margins
(Page 3 of 4 )

In the previous segment, I built a basic web page to help demonstrate how easy it is to create a fully-centered liquid layout using auto-margins. Having at our disposal the structural markup of the page in question, it’s time to add to it a set of CSS styles which will be responsible for constructing the centered layout. Essentially, the styles required to accomplish this task are the following:


body{

padding: 0;

margin: 0;

background: #999;

}

h2{

margin: 0;

font: bold 18px Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

#header,#footer{

padding: 10px;

background: #ffc;

}

#wrapper{

width: 70%;

margin-left: auto;

margin-right: auto;

}

#navbar{

padding: 10px;

background: #fff;

}

#navbar ul{

list-style: none;

padding: 0;

margin: 0;

}

#navbar li{

display: inline;

padding: 0;

margin: 0;

}

#navbar a:link,#navbar a:visited{

margin-left: 20px;

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

text-decoration: none;

}

#navbar a:hover{

background: #fc0;

}

#maincol{

clear: both;

padding: 10px;

background: #fff;

}


As shown before, the above group of CSS styles permits us to quickly build a centered web page layout, thanks to the functionality provided by auto-margins. In this case, you should notice that the main wrapper DIV has been assigned a width of 70%, while its respective left and right margins have been declared with a value of “auto.”

So far, so good, right? At this point, you hopefully grasped the logic that stands behind building centered layouts by utilizing CSS auto-margins. Next, I will simply group the CSS styles coded before with the previous structural markup to complete the development of this centered web page design.

To learn the full details of this process, please click on the link that appears below and read the following section.


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