2 Columns, Center-Aligned, Fixed Width

More About Margins

We've seen several different techniques for controlling margins. Let's take a hypothetical situation where we want our top and bottom margins to be 20 pixels, and our left and right margins to be 40 pixels. We could set it up like this:

body{
margin-top:
margin-right:
margin-bottom:
margin-left:
}

Well that's a bit tedious. You already know we can make that statement much more concise:

body{
margin: 20px 40px 20px 40px;
}

We start at the top and work clockwise, so it goes: top right bottom left.

Did you know we can make that statement even MORE concise? Since my top and bottom margins are the same, and my left and right margins are the same, I can do this:

body{
margin: 20px 40px;
}

That's like saying top and bottom is 20px, left and right is 40px;

What if you wanted all four margins to be 20px? You can do that with just one value:

body{
margin: 20px;
}

So let's zero out those body margins:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Superb. The wrapper div should be centered in the browser window, with no margin visible up top. Make certain yours works like this.