HTML and CSS Reference
In-Depth Information
Figure 6-3.
With easy clearing, our float no longer colors outside the lines.
Horizontal Centering
Another frequent need is to center an entire layout horizontally within the browser window.
While you might think this should work without resorting to CSS trickery, you would be
wrong. Happily, the workaround is a quick and easy one (and you can use it to center other
elements within your layout, not just the entire page—bonus!).
The only requirement is that you have a wrapper around your entire layout. For this
example, we'll call our wrapper element
#wrapper
:
<body>
<div id="wrapper">
...
</div>
</body>
Take a few seconds to imagine all your other layout elements where the
...
is in the previous
code. Done? OK, now on to the CSS:
body {
text-align:center;
min-width:800px;
}
#wrapper {
margin:0 auto;
width:800px;
text-align:left;
}
Setting
text-align:center;
on the
body
element centers the layout in IE/Win, thanks to
another one of its rendering bugs, while the
min-width
dimension (which should match the
dimension on
#wrapper
) corrects a strange behavior in some slightly older versions of Mozilla
