CSS Café Tutorial 12 - The Flow

The browser is programmed to position the elements of a document in a certain way based on established standards. This is called the "normal flow". Starting at the top of the file it displays block level elements with a linebreak before and after while the inline elements flow next to each other.

In general, block elements can contain inline elements but inline elements can only contain other inline elements. Div is a block element, you cannot have the span, an inline element contain a div. Through CSS you can control the type of box a block element will generate. The "display" property allows you to redefine the native characteristics of an element and make a block element display inline or vice versa. You can also stop an element from generating any box at all by choosing "none" for the display property.

It's not possible to put two block elements next to each other without CSS. And you also need to know that there are some exceptions to the normal flow. Floated or absolutely positioned elements to do not obey the rules of the normal flow.

<div id="homepage">
<h1><span>Four Square Café</span></h1>

<div id="specials">
<h2><span>Today's Specials</span></h2> 

<img src="images/p.jpg" alt=" ">
<h3>Marquesas Pretzel</h3>
<p>A unique combination....</p>

<img src="images/d.jpg" alt=" ">
<h3>86 Percent Donut</h3>
<p>Glazed with a bittersweet chocolate...</p>

<img src="http://pics.cssrule.com/pics/k.jpg" alt=" ">
<h3>Cinnamon Swirl Coffee</h3>
<p>A flavored coffee...</p>
</div>

<div id="intro">
<p>Four Square Café is located at ....</p>
</div>

I want to plot the flow of the Cafe document as if we're the browser. The div, h1, h2, h3 and p are all block elements. The span, any text content and the img are inline elements. The reason that there are linebreaks before and after img tag is because it's sandwiched in between block elements which always generate a linebreak before and after themselves. The following drawing made up of boxes, some of them with linebreaks and some without, is how the browser views our document: