Controlling Layout with Offsetting .............................................................
In the previous examples in this chapter, you’ve used topand leftproper-
ties to describe absolute locations. Now, take a further look at offsetting one
element relative to another.
Topand leftare specific locations in relation to an enclosing object. For
example, if your element is not enclosed within another element, the top
and left are specified in relation to the browser window (or “viewport”).
The World Wide Web Consortium (W3C) is quite vague and sometimes con-
tradictory about some of its terminology. A central problem — aside from
traditional academic fondness for airy theory — is that the W3C wants to
avoid using the specific, concrete, understandable term browser. Instead,
they prefer the abstraction of the term viewport— a device-independent
notion. Given that HTML and its offspring are supposed to be usable on cell
phones and large monitors, the idea is that the term viewportmore accu-
rately expresses the potential variety of output devices. Given that 99 per-
cent of your CSS efforts will end up in a browser, I suggest that you politely
ignore the platform-independence abstractions. It’s just confusing. So, like
most authors of books on CSS, I’ll just ignore the viewport problem and use
the terms browser windowand viewportinterchangeably.
Sometimes elements are positioned withinother elements (such as a para-
graph <p>inside a block <div>). In that case, specifying top and left are in
relation to the container element — the <div>that surrounds the <p>, for
example.
Visualize documents as made up of blocks nested inside other blocks. A simple
document with just a series of paragraph (<p>) elements can be viewed as a
<body>element containing the <p>elements. Here’s the official terminology:
The body is the containing block of these paragraphs.
Notice that the blocks-within-blocks visual description parallels the idea of a
“tree-structure” within an XML or even an HTML document. Parent/childis
another way to describe this hierarchical concept.
Enough theory. Take a look at an example of positioning:
<html>
<head>
<style>
div.sidebar {position: absolute; background-color:
cornflowerblue; top: 0; left: 0; width: 100px;
76 Part II: Looking Good with CSS
