Floats and layout

A couple of examples I wrote up when I wanted to understand how floats are laid out.

HTML

<!-- First example: 

The typical scenario you get when you put a floating image in an article: the first and second divs are floating, and placed next to each other on the same line. The third div is -not- floating, and participates in layout as though the other divs weren't there: the outer top and left edges of the third div's margin box are touching the top-left corner of the containing element (the .example div). The -content- of the third div begins on the first line of the containing example div. Because the first/second divs are floating, and because the first words of content are able to fit alongside them (alternatively, try a really long word to begin with), the content begins horizontally adjacent to these two, and continues below them. Note that the third div's -content- must lie outside the margins of the first/second div.

-->


<div id="first_ex" class="example">
    <div class="fst">First div</div>
    <div class="snd">Second div</div>
    <div class="thd">This is a third div with some content in here that might wrap around. Still more content. Again more content.</div>
</div>
<!-- 
Example 2: 

Here, the outer left and top edges of the third div's margin box -again- touch the upper-left edge of the .example container. However, the third div's content area (sized by the "width" CSS attribute) is now too skinny to make space for the first two divs, so the first line box of the third div needs to begin -below- the floats. 

Remember: the outer left margin-box edge will behave as though the floats arent there and touch the left edge of the .example container. The third div has no margin, no padding, and a small border. Thus the line box corresponding to this element (containing the content) will begin immediately after the border. From the spec: ``line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until...

CSS

.example {
    margin-bottom: 50px;
    width:100%;
    float: left;
    border: 1px dashed orange;
}
.example div {
    width:20%;
    border: 5px solid black;
}
.fst {
    background-color: red;
}
.snd {
    background-color: blue;
}
.example div.thd {
    background-color: green;
    float:none;
    border: 5px solid purple;
}
#first_ex div.thd {
    width: 50%;
}

#second_ex div.thd {
 /* Already has 20% width */
}