• Flow Model
• Box Model
• Float Model
• Position Model
• Script Model
• Controls
• Table Layout
• CSS F-Layout
• CSS P-Layout
• Partitions

1. Content comes from the primary HTML page, partitioning.htm
2. Styles are imported from a Cascading Style Sheet, DemoStyleSheet2.css
3. Behaviors are derived from a linked Javascript file, DemoScript.js

Cascading styles are applied to elements and to classes and ids to establish a design. The widths of the navigation column and side-bar are fixed, allowing the content column to vary with the page size. This is referred to as a fluid design.

This image is completely irrelevant to the topic of this page except that it allows us to illustrate how elements can be resized using Javascript. The image's width is made larger on mouseover and smaller on mouseout. These events are bound to the image as event attributes in its markup. Mousedown and mouseup also enlarge and contract the image. These events are bound to the image element in a Javascript function called when the page load event fires.

The img element is styled to float left, which flows text around it to the right. As text continues, it will eventually flow back to the left margin, beneath the image. Floated elements are taken out of the page flow. That is, they do not affect the placement of other boxes on the page. However, text is not allowed to enter their margins, so the result is that text flows around the floated element, but within the text's original box, extending the size of the box as needed.

It takes quite a lot of text to get that far, and you are probably getting tired of reading this content, but with a little patience you have now seen how the text does indeed flow back to the left margin. Did you really read all of this? I became bored just writing it.