- Download this zipped file (rainbows.zip).
- Unzip the two files and put them in a folder called rainbows.
- Open the two files in notepad++ and open index.html in your browser. Note the starting positions of the various containers.
- Start by leaving the <header> as it is and changing the position of the other container in the order they appear in the flow of the HTML. (nav, section, article ...)
- Start with <nav>. Add "float: left" to layout.css, save, go to your browser and refresh. Note the change of positions.
- Now experiment with the different positional properties:
- float: left / right / none
- position: absolute / relative / fixed / static
- clear: both / left / right
