Random ramblings from a random rambler
Section 05
The Flow Is With You
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.