<h2>The Flow Is With You</h2>
In our third exploration of Cascading Style Sheets, we explore the foundations of CSS Layouts. CSS provides powerful tools to transform our structured XHTML into a beautiful document. But with great power comes great responsibility: There are many concepts and quirks to CSS layout, and it's our duty to learn and control them.

Using an iconic page from a comic about everyone's favorite web-slinger, we explore the CSS box model. We learn each and every XHTML element is contained within a box. And although these boxes are built from similar properties--such as content, padding, borders, and margins--the behavior of these boxes differs radically depending on whether it is inline or a block.

The differences in behavior are manifested when blocks are laid out on a web page by the flow. Our favorite Jedi master demonstrates how we can use the flow to our advantage, either by floating boxes to the left or right, or directly positioning boxes my manipulating their CSS properties.

Finally, we combine our new-found CSS powers upon XHTML lists to create functional, navigation menus.
<h2 title="Section 03 Slides">Resources</h2>
<ul>
	<li><a title="Section 05 Slides" href="/teaching/section_05_slides.pdf">Section 05 Slides</a> (PDF, 7.1MB)</li>
	<li><a title="CSS Layout and Formatting" href="http://reference.sitepoint.com/css/csslayout/">CSS  Layout  and  Formatting</a></li>
	<li><a title="CSS Positioning" href="http://www.brainjar.com/css/positioning/">CSS Positioning</a></li>
	<li><a title="Learn CSS Positioning in 10 Steps" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">Learn CSS Positioning in 10 Steps</a></li>
	<li><a title="Inline Elements and Padding" href="http://www.maxdesign.com.au/articles/inline/">Inline Elements and Padding</a></li>
	<li><a title="CSS Lists" href="http://www.w3schools.com/css/css_list.asp">CSS Lists</a></li>
	<li><a title="Taming Lists" href="http://www.alistapart.com/articles/taminglists/">Taming Lists</a></li>
	<li><a title="More Nav Lists" href="http://www.learn-css-tutorial.com/CSS-Lists-As-Hierarchical-Menus.cfm">More Nav Lists</a></li>
</ul>
<a title="Return to teaching home" href="../../teaching-home/">Return to teaching home</a>