I’m sure a lot of you might know how to center a layout using CSS already, but I’m sure some of you still are clueless of how do we actually place the layout in the center, for both Firefox and IE (considering these two are majorly used, and the fact that most other browsers work around the same compatibility guidelines as FF) Years ago, 1997 - 1999, when Tables were still the ‘hot’ thing in town, we used to throw in all our layout elements in a table with a size according to your layout and then we aligned it on the center of the page - and, this rendered the layout in the center perffecctlly! Alright! Let me show you a quick example on how it used to be done back then in the early 90s! We’re going to use a layout from our Portfolio, KoffieBeker Specialist. So, here’s a screenshot of the layout that we’ll be using - and only take into account its "width" because that’s the essential guideline / size that we’ll be needing in order to place our layout in the center of the page or browser. In this case, the width for our layout is 797px! This is how it used to be done in Tables. The code below should produce this

<table width="797" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><img src="koffiebekerlayout.jpg" width="797" height="770"></td> </tr> </table>

It works pretty much around the same concept too with CSS, but instead of using Tables, we use DIVs. Here’s an example to center a layout using CSS. The code below should produce this Lets look at the CSS code first

body { text-align: center; } #layout { margin: 0 auto; width: 797px; text-align: left; }

And now the HTML code

<div id="layout"> <img src="koffiebekerlayout.jpg" /> </div>

A quick explanation of how it works We have a div called #layout with a fixed width (which is our layout’s width) assigned to it and we set the margin: 0 auto to force the div to stay in the center of the page at all times. So whatever layout blocks we place in #layout later will be centered automatically. By default IE won’t listen to margin: 0 auto so it needs to be told that "Hey, #layout needs to be in the center!" so we use text-align: center in the body to tell IE that! And finally, we need to align the text back to its default position, which is left. So we place text-align: left in #layout so from now on, whatever blocks, or text we place in #layout will be aligned to the left side of #layout. And there you have it, a beginner’s guide to centering a layout in a page! Hope this tutorial helps!