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

Poor Best

Rating:

/ 1

April 30, 2009

TABLE OF CONTENTS:

<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>

Now that you have the chance to see the complete source code of the previous (X)HTML file, I guess that you won't have major problems understanding how it's used to build an elastic, fully-centered design. In addition, here there's a complementary screen capture that shows how the design in question is rendered on the browser:

Of course, you're free to modify all of the code samples developed in this and other tutorials of the series, so you can experiment with all the DIV-centering approaches reviewed here and choose the one that best suits your needs.

Final thoughts

After a long journey, we've come to the end of this series. But overall, the experience has been educational, since you learned different CSS-based techniques for building centered web page layouts with remarkable ease.

If you create this kind of design for your own websites frequently, then it's possible that you may want to take a closer look at some of the approaches explored here.

See you in the next web development 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.