Here is the hint for you: this trick centers the element, not children of element. It makes sense for
div, and not for body.
Let's say you want to place a poem. It requires that the strophes was left-aligned, as always, but you need to create a bounding column around the strophes, and the column should have equal margins on left and right. As you don't know how much space is available and required, you use auto. It makes sense for the element which width is defined by its content.
You need to do one important step: stop mixing up elements and content of elements.
I have no idea what would you expect doing it on page, but perhaps all you need is some fixed
padding on left and right, better be in relative em units, not absolute pixels.
[EDIT]
Another approach would be:
<html>
<head>
<style>
div.body {
width: 80%;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="body">
Put here what used to be your page's content
</div>
</body>
</html>
Are you getting the idea? It certainly works, but I don't see whole lot of practical sense in it. Trust me, just use some 3em for
margin-left and
margin-right.
—SA
Submit an article or tip