Normal Flow

The term normal flow refers to the normal behavior of the browser. As you've surely noticed, everything defaults to the left of the browser unless otherwise modified by HTML or CSS. Consider Example 12-1.

Example 12-1. Unstyled content to help visualize normal flow in a browser

[View full width]

<!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.

[View full size image]

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.

[Previous] [Contents] [Next]