textwrap

running words around
design education and visual communication
authored by chris m hughes

Marginalia - centering with css

Friday, 7 November 2008

Centering div layouts using css can be confusing because there are quite a few solutions. But all are reasonably logical when you examine them in detail.

In the bad old days of table layouts, a centered website was easy - a table with the appropriate width is inserted into the html and is aligned to the centre of the page, end of story.

Today, with CSS-only layouts, that alignment is still used for divs to satisfy the foibles of Internet Explorer, but all sorts of other pieces of css are required to get the excat effect you want.

The basic aligment is done by giving the body the following css -

body
{text-align:center;
}

Now, everything you add into your html will start in the centre of the page. So we can insert a wrapper div. Its styling requires -

#wrapper {
text-align:left; /*alignment hack to counteract the body aligment */
margin-left:auto;
margin-right:auto;
width:800px; /*whatever width you like*/
}

By using auto, we force the div to sit in the middle of the page, flanked by equal-sized margin areas. Text align left means that inside the wrapper, our other divs and text content start from the left and ignore the body alignment. And that's it.

But here's an alternative that doesn't require the aligment hack, and only needs one margin value.

The idea is to use negative margining. The css is elegantly simple, and the trick is that the negative margin value needs to be exactly half the width of the wrapper. The wrapper than nudges to the left by half of its own width. And here it is:

#wrapper {
position: absolute; /*the wrapper is actually an apDiv*/
left: 50%;
width: 800px;
margin-left: -400px;
}


There are a few other good uses for negative margins - you can overlap content areas, offset floating divs, and align disparate content. But one of best-kept secrets of a div layout is vertical centering.

This is really useful if you want something to always sit right in the middle of the screen, so that as you resize the browser, the proportional space above, below and on both sides remains constant. For instance, you might want a page to look like it's a shot from a movie at 70mm letterbox resolution.

Again, it's straightforward and uses a very simple calculation.

As well as the horizontally centered wrapper, we make the browser 100% in height by adding to the body like this:

html, body {
height:100%;
}


Then comes the clever part. We simply add an empty div tag ABOVE the wrapper and set it's width to 100%, and its height to 50%. In effect, it always takes up the top 50% of the browser space. Then we add a negative top margin, whose height is exactly half the height of the wrapper (which is placed BELOW it).

#above {
float:left;
width:100%;
height:50%;
margin-top: -400px; /* half the height of the wrapper */
}

The wrapper now nudges up into the empty div by half of its own height, right in the vertical middle of the page.

All the variations of negative margins are based around the box model - so be aware that various versions of IE contain minor (but annoying) box model bugs that may require workarounds.