Colums and Floats

Web grid systems are similar to print frid systems in that they are laid in rows and columns. In web, one of the easiest ways to create columns is to use the width, float and clear system.

It is important to remember that when you float columns, you must also clear them. Columns in code comply with the Box Model standard. This means that the total width of a column is determined by what size you want it to be, minus the padding, border, margin.

Single Column

This is a single column. Its width is 1024x minus .main's padding and its own padding

Two Columns

This is two columns. Its width is 1024px divided by 2, a minus its own padding and margins.

Two Columns

This is two columns. Its width is 1024px divided by 2, a minus its own padding and margins.

Overflow

The overflow property is used to tell our .main elemnent that it wrap around all of the components inside of it, whenther they have floats or not. There are mutiple values for the overflow property; . the two most common are overflow: auto and overflow hidden

three columns.

content

three columns.

content

three columns.

content

four columns.

four columns.

four columns.

four columns.

five columns.

five columns.

five columns.

five columns.

five columns.

Uneven Width Columns

Large LeftColum

This column is 625px widew.

Small Right Colum

This column takes up the remaining space.

Small Left Column

This is 355px wide.

Large Right Column.

This column takes up the remaining space.

Three Column Uneven Width

Left Column of Three

Middle Column of Three

Right Column of Three

Clearing Floats

The clear property in css is used to clear out the floats of elements that occured before it. Clear allows all elements after the floated elements to fall into their natural positions. Typically, when you use clear, you place onto an empty div.