Assignment 029g2

Div Layouts - Floats

Divs are used to create sections of your page, including the header, left column, content, right column, and footer. We also sometimes throw in a few other divs to better organize the structure of a page. The trick to organizing the divs is the float property. When you float a div it floats the specified direction. We use floats to create columns. Just remember to clear your floats.

float:left; or float:right;

All following items (divs) flow next to the floated div.

The following sub-assignments will help you understand this process:

1. The Structure (A an image of our goal - just link to the image)
2. The Divs (The structure, no CSS - just code the divs)
3. The Divs Colored + Height + Width (Add CSS - just add color and dimensions)
4. The Divs Layed Out + Float (Position Divs - just add floats to position the columns)
5. The Divs Min-Height Hack (Adding Minimum Height for all browsers - just learn and add the CSS hack)
6. The Divs Reset - normalize.css (Reset all browser displays - just a little more CSS to set startup settings.)
7. The Divs Padded (Add padding to the divs - adjust column widths)

Regarding resets, read the following article and use the normalize.css reset.