CSE686 - Internet Programming
Demonstrate Table Layout
Content
This page is structured with a single table with three columns, a heading row, and a content row. The heading uses a colspan attribute to merge its three columns into a single heading column.

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 floats work. 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.