The theory behind the CSS multi-column layout

Now let's take it even slower and try to better understand the key points in the solution presented for the multi-column layout a.k.a. 'The Holy Grail' of CSS layouts.

First of all we need to understand the float positioning scheme. For that we need to understand what normal flow is because the behavior of floated boxes is defined as opposed to the normal flow. Wait! what boxes?!
So we have to start with the box model.

As it is said in the w3c CSS specification (http://www.w3.org/TR/CSS2/box.html):

"The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model."

So each HTML element in the page generates a box. The box is formed by the content of the element which is surrounded by the padding area which is then surrounded by the border and the border is then surrounded by the transparent margin. The padding area is meant to leave space between the border and the content.
The margin is meant to leave space between the border of the element and other boxes. 

Boxes are laid out in the page by default according to the normal flow (i.e. the normal flow is defined by the default way of laying out the boxes). This means that the block-level elements stack up one on top of the other starting from the top and following the order of the boxes in the page. The type of the element (block-level or inline-level or other less used types) is defined by the CSS display property.
The default value for the display property of div elements is block. To see this default value you can find it e.g. in chrome developer tools under 'user agent stylesheet' (i.e. browser stylesheet).

Now that we got a grasp about the normal flow we can finally define the float positioning scheme:
Floated boxes (the ones that we apply a CSS rule like float:left or float:right) are taken out from the normal flow and shifted to the left (or right) until they encounter the edge of the container or another float. The non-floated boxes behave like the float is not even there and their content is flowing along the edge of the float and then go underneath. 
See here an example: https://googledrive.com/host/0B0pX21g4KS9DWGZncG5tRnl4UUU/2column.html  
In Chrome developer tools if you hover over the main section to see its box you will notice that it does not take into account the floated left sidebar and shares its left edge with it. However, the content is not hidden under the float but flows along its edges.