Example 12-1. Unstyled content to help visualize normal flow in a browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
</head>
<body>
<h1>The Black Cat</h1>
<h2>By Edgar Allen Poe</h2>
<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
wife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold
fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and
beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of
his intelligence, my wife, who at heart was not a little tinctured with superstition, made
frequent allusion to the ancient popular notion, which regarded all black cats as witches
in disguise. Not that she was ever serious upon this point - and I mention the matter at
all for no better reason than that it happens, just now, to be remembered.</p>
</body>
</html>
Because you already have an understanding of the box model, you now can visualize how each block element (the headers and paragraphs) are stacked on top of one another and flow normally to the left.
The inline elements (the links) go with the flow. If you resized the browser, they would simply reflow to their new position without breaking the line.
Figure 12-1 shows how the document appears in a browser window, and Figure 12-2 shows that browser upon resizing. You'll see how the text adjusts to the available space, always flowing to the left.
Figure 12-1. Unstyled document in the normal flow.
Figure 12-2. Resizing the browser reflows the text to the left.
After looking at these examples, try it out: Open a simple document with no tables or CSS positioning, and size and resize your browser. What you're observing is the normal flow of elements within that browser.
