Layout by Flow

This page demonstrates the CSS properties configured to create a layout based on the natural flow of styled elements in the source code. Elements flow top-down, each one below the preceeding element. Here you see the navigatin bar at the top, then the header, then the main text area with text in it. Lastly, the footer.

You can see the external .css file used to style this page by clicking here. When you download this file if you do not have a software to open it, then change the .css file extension to .txt and the style sheet will open in Notepad.

Please look at the source code of this page. In the menu of your browswer go to View >> Source. You may notice when looking at the source code and the style file that there is a third type of selector called an "id" selector. I have been using it throughout these pages. It works in much the same way as a classs selector. The difference is a class selector is used as many times as you want in a page. A id selector is used only once.

Please click on Float Layout.