This !DOCTYPEdeclaration can have unintended side effects such as chang-
ing proprietary IE behaviors that you might be exploiting (relative font sizes,
for example, can render differently). But if you want to try using the declara-
tion, it does force IE 6 to switch to its CSS standards-compliant mode.
Vertical Positioning with Auto ...................................................................
Just as you can set three properties to autowhen sizing and positioning hori-
zontally (widthand the leftand rightmargins), so, too, can you in theory
use the autovalue with the equivalent vertical properties: heightand the
topand bottommargins.
Strangely, centering an element when using normal flow (the default) is rather
difficult because if you try to use autoas the value for the margin-topor
margin-bottomproperties, the value is evaluated as zero! Autois just ignored
in this case. Recall from the discussion of horizontal centering earlier in this
chapter that automargins can be used for centering — and indeed using auto
margins is the recommended technique for CSS centering.
You can freeze the top position of an element using the following code. Just
specify the top-marginvalue, but ignore the element’s height:
p {width: auto; margin-top: 100px; margin-bottom: 100px;
border: 2px solid;}
Figure 11-5 shows how an element can be put in place in a specific vertical
location, but its height is not frozen. Adjusting the browser (or parent ele-
ment) shape can add or subtract from the element’s height (see how the
paragraph loses some height on the right side of Figure 11-5, when the
browser is widened).
You can fiddle around with absolute or relative positioning and achieve
vertical positioning that works in some of the minor browsers, but these
workarounds still don’t work in Internet Explorer. Also, don’t be tempted
to fiddle with the vertical-alignproperty. It’s designed to manipulate
the position of inline text elements (such as superscripting); the vertical-
alignproperty has no effect on block-level content.
Here’s example code that does work fine in Firefox and Netscape:
div {
height: 100%;
width: 100%;
display: table;
202 Part III: Adding Artistry: Design and Composition with CSS
