Colums and Floats

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

It is importanta to remember that when you float colums, you must also clear them. Colums in code comply with the Box Model standars. This means that the total width of a colum is determined by what size you want it to be, minus the padding, border, margin.

Single Colum

This is a single colum. its width is 1024px minus .main's padding and its own padding.

Two Colums

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

Two Colums

This is two colums. Its 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, whether they have floats or not. there are multiple values for overflow property. The two most common are overflow: auto and overflow: hidden.

Three Colums

Three Colums

Three Colums

Four Columns

Four Columns

Four Columns

Four Columns

Five Colums

Five Columns

Five Columns

Five Columns

Five Columns

Uneven Width columns

Large Left Column

This colum is 825px wide

Small Right Column

This column takes up the remaining space.

Small Left Column

This column is 355px wide.

Large Right Column

This column takes up the remaining space.

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