Centering With CSS: Web Pages And Block Level Elements

The question of how to center a css layout in the browser window comes up very often. Seems to show up daily in the webmaster forums I visit and I thought it about time I devote a post to centering web pages that use a css layout. The same technique used to center your entire page will also work to center any block level element within the layout so if you learn it you’ll be able to center anything you want inside your css layouts. It’s also rather simple to learn and use.

Auto Margins For Centering

With table based layouts it was pretty easy to center a page, right? You wrapped a <center> tag around your main table and then aligned each table cell however you wanted. But we’re using css now and that <center> tag has been deprecated from the language anyway. Actually the css way is easier since you won’t have to tell everything inside the page where to align itself. It will still all be aligned to the default left.

With css the way to center anything that’s a block level element is with the margin property. One of the values of margin is auto and by setting auto on the left and right margin our block level element will center itself. For the block level element we’ll typically use a div, but it will work with any other block level element as well. There are two more things we need to add to make this work. One is the use of a proper doctype which we’ll cover in a bit.

The other is a width. Our block level element needs a width applied otherwise it will use the default of 100%. When centering something that’s 100% of the width of it’s containing element it will stretch to the edges of that element. Technically it is centered, but to us it’s just stretched to the edges. As long as you specify a width that’s less than the width of the containing element your block level element will be centered inside its container.

Centering An Entire Web Page

One of the more common things people want to center is the web page itself. To center your page you want to wrap all of your html with a single div (outr block level element) and apply the css to that wrapper div. The containing element for the wrapper div will be the body and so the wrapper div will end up centered within the body of the document. Your html will look something like:

<body>
 <div id="container">
  all of your html for the page
 </div>
</body>

and your css:

div#container {
 width:760px;
 margin:0 auto;
}

I’ve given the container div an id of wrapper, though any name will do. Here I’ve set the div to a width of 760px which is fairly common when designing for 800×600 resolution and then simply applied the left and right margin with a value of auto using the css shortcut for margin. Now the entire div (which contains all the code for your page) will be centered within the body while all the elements inside the div will still be aligned left. We centered the wrapper, but not the content inside wrapper.

Centering Elements Within The CSS Layout

The same technique can be used to center most anything in your layout. Either the element you want centered will already be a block level element or you’ll wrap what you want to center in a div and center that wrapping div. Let’s say you have a header in your layout that stretches 100% of the document body, but you want to center your company name inside the header div. Just wrap your company name in it’s own wrapper div and use the same css as above to set a width along with our auto left and right margins.

Same for your menu. Perhaps your layout consists of 2 columns with the left column containing a menu built with a simple unordered list. Just as with the page and company name wrap a div around your unordered list, give that div width that’s smaller than the width of the column, and add your auto margins. Your menu will be centered in the left column while the links will still be left aligned within the list. Pretty simple.

Doctypes For Centering

The above code will work without anything else in all standards compliant browsers. Of course we all know there’s one browser that isn’t quite as compliant as we would like. Yep, good old Internet Explorer. Fortunately the fix for IE is something you should be doing anyway, which is using a proper doctype at the start of your document file.

Without a doctype IE goes into what’s called quirks mode and it won’t be able to handle the auto value on the margin property. You really should be specifying a doctype anyway so this isn’t something to necessarily blame on IE. When a browser falls back into quirks mode it just assumes you’re not using valid code and instead some of the poor code that originally made it on the web. The browser will attempt to interpret your mistakes and will correct some things for you. Sounds like it’s doing us a favor, but in truth it just leads to a lot of sloppy code. Many times if you can’t get things to look right in Firefox, but they are looking right in IE it’s because you didn’t specify a doctype. IE is fixing some of your code while Firefox isn’t.

As long as you apply one a proper doctype IE will be fine with the auto value on the margin property and everything will center like expected. If you haven’t used doctypes before now is as good a time as any to start. It will set you on the path to writing better code that validates and improves your skills as a coder.

That’s really all there is to centering your web page and elements in your css layouts. Wrap things in the block level div and apply widths and auto margins. Remember to use a proper doctype as you should anyway and you’re all set. Pretty simple and a lot less code than with tables since you don’t have to reset the alignment on everything.

Download a free sample from my book, Design Fundamentals.

Leave a Reply

Your email address will not be published.

css.php