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 columns is to use the width float and clear systems.
Its 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 and margin.
This is a single column. Its width is 1024 px minus .main's padding and its own padding.
This is two columns. Its with is 1024 px divided by 2, and minus its own padding and margins.
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 the overlfow property. The two most common are overflow: auto and overflow: hidden.
This column is 625px wide.
This column takes up the remaining space.
This column is 355px wide.
The clear property in CSS is used to clear out the floats of elements that occurred 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.