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

Poor Best

Rating:

/ 3

April 09, 2009

TABLE OF CONTENTS:

As I said in the section that you just read, to finish creating this liquid, centered web page layout, it’s necessary to include in one single file its two building blocks, that is the presentation and structural layers respectively. Thus, with that idea in mind, below I coded such a file. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on centering DIVS with a liquid layout (uses auto margins)</title>

body{

padding: 0;

margin: 0;

background: #999;

}

h2{

margin: 0;

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

color: #000;

}

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;

}

</style>

</head>

<body>

<h2>This is the header of the web page</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>

</div>

<ul>

<li><a href="#" id="about">About Us</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

<h2>This is main section of the web page</h2>

</div>

<h2>This is the footer section of the web page</h2>

</div>

</body>

</html>

Here you have it. The previous sample (X)HTML file should give you an approximate idea of how to use CSS auto-margins for constructing centered liquid web document layouts with extreme ease. And in case the above code wasn’t illustrative enough for you, here’s an additional image that depicts how this concrete web page design is rendered by a browser:

Now that you’ve hopefully acquired a more solid background in working with CSS auto-margins, feel free to modify all of the code samples included in this tutorial, and test the functionality of this alignment technique with more complicated web page layouts.

Final thoughts

In this fourth chapter of the series, I explained how to build a fully-centered liquid web page design with the assistance of CSS auto-margins. Indeed, this layout technique is very flexible; it allows you to work not only with basic documents like the one that you saw in previous examples, but with more complex ones as well.

Speaking of complex layouts, this is the topic that I’ll be discussing in the upcoming article; that is, the construction of elastic, centered designs with CSS auto-margins, whose structure will be comprised of multiple columns.

Now that you’ve been warned, you won't want to miss the next tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.