HTML and CSS Reference
Note You can find the code for the HTML and CSS for this chapter in the Source Code/Download section
of the Apress web site.
Please, please don't use a <center> tag on your web page. You center a layout in the CSS,
not in the web page markup. In our example, you'll see mechanisms in place to do this:
For the more standards-compliant browsers out there, you use the margin property
on the element that needs to be centered and give it a value of auto . So, the wrapper
div had margin:10px auto 0 auto , where the left and right values were set to auto . This
causes the browser to calculate equal margins on either side, thus centering the wrapper div.
For IE/Windows version 6 (if running in quirks mode) or earlier, the previous technique
is not recognized, so the body element is given a text-align value of center . This causes
anything in the body, regardless of whether it really is text, to center on the page. That
leaves us with something to clean up, though.
Because of inheritance, every element below the body element in the document (basi-
cally, everything!) will also center text, so we need to reset the normal appearance of
text and other elements by reapplying a text-align value of left in the newly centered
wrapper div .
In our CSS example, you'll note that some items are positioned using the value absolute
and some with relative . What's the difference and which one should you use?
When you specify that an element is to be positioned absolutely, the browser needs to
know “in relation to what?” If you state that it should be absolutely positioned 0 pixels from
the top and left, the browser treats that as 0 from the browser viewport, regardless of what
container that element sits in or how far down the document tree that is—unless you tell the
browser to use a different starting point.
If the element you are trying to position is contained in one that is itself already posi-
tioned (as the wrapper div is), then the x and y coordinates (or left and top properties) start
from that point. This is a tricky concept to explain with words alone, so refer to Figure 7-3,
which explains it visually.