Page Layout

CSS is also used for positioning content on a page. Typically there will be a header section, navigation, a content section which is subdivided into one or more columns, and a footer section.
To fully understand css positioning, you will need to take an in depth look at the "box model." Some of the concepts involved are margins, padding, floating divs, and absolute versus relative positioning. See the links section for websites that explain the box model.
The html and css files below provide a useful exercise for beginners. A layout grid is used as the background image of the web page. Boxes or "divs" are positioned on the page. Students can explore css positioning by experimenting with the values in the css stylesheet.



View Sample

Download Layout Grid

See the links section for websites from which you can download ready-made css layout templates.

Sample Projects