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.
HTML
CSS
View Sample
Download Layout Grid
See the links section for websites from which you can download ready-made css layout templates.
Sample Projects
- Students will experiment with the values for top, left, and width to reposition the divs.
- Using grid.html as a template, students will reposition the divs and change the colors to draw flags.
- Using grid.html as a template, students will replace the background image and insert images into the divs. By changing the opacity property to a number between 0.1 and 1.0 students will experiment with overlapping transparent images.
- By extending the idea from the previous project, students will create a web page which serves as an advertisement for a product of their choice.
- Using grid.html as a template, students will create two versions of a one page web site. The first version will position content in an orderly grid-like fashion. The second version will experiment with unorthodox and asymmetrical placement of content.