CSS Training

Sample of the pdf document :

Part II: Liquid layout – 2 columns:

1. Create 6 “divs,” like we did in the first exercise, for “header,” “topnav,” “left,” “main,” and “footer,” but none for “wrapper.”
2. Add CSS rules for background color.
3. Add body rule {margin:0; padding:0; font-size:10px}
4. Give the “header” 10em, the “topnav” 1em, and the “footer” 2em height.
5. Save and preview it on browsers.
6. Add some text to the “main” div. It will move below the “left” div.
7. Add “float” left to “main” div. “footer” will stay below all.
8. Float “main” to the right, and notice what will happened to the “footer” div.
9. Past some text in the “main” “div.”

Part III: Liquid layout – 3 columns:

10. Insert another “div.” Name it “right”
11. Float the “left,” “main,” and “right” to the left.
12. Give the “left,” “main,” and “right” 20%, 60%, and 20% width.
13. The “footer” wouldn’t budge.  Add “clear-both” to it.

To extend the............ 

 Click here for  Download PDF / FREE