Columns and Floats

Web grid systems are similar to print and grid systems in that they are laid out 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 1024px its own padding.

Two Columns

THis is two columns. It's width is 1024px divided by 2, and minus its own padding and margins.

Two Columns

THis is two columns. It's width is 1024px divided by 2, and minus its own padding and margins.

Overflow

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

Three Columns

Three Columns

Three Columns

Four Columns

Four Columns

Four Columns

Four Columns

Five Columns

Five Columns

Five Columns

Five Columns

Five Columns

Uneven WIdth Columns

Large Left Column

This column is 625px wide

Small right column

This column takes up the remaining space

Small Left Column

This collumn is 355px wide

Large Right Column

This collumn takes up remaining space

Three Column Uneven Widths

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 the natural positions. Typically, when you use clear, you place it onto an empty div