Introduction:

First of all I need to tell you that the box model for Opera, Firefox and Internet Explorer (IE) has been set to border-box. Second — since the surrounding fieldset has width:1010px; border:5px solid black; padding:0px; there will be 1000 pixels left for the floating elements inside. This means that <div class="float" "style="width:1%;"></div> will be rendered with a width of 10 pixels if we place it inside the fieldset.

Issue 1: Rounding off percentages

In figure 1.1 to 1.4 we have these three elements:

<div class="float row1 label" 
  style="width:20.04%;">
  Div 1 @ row 1
</div>
<div class="float row1 label" 
  style="width:20.04%;">
  Div 2 @ row 1
</div>
<div class="float row1 label" 
  style="width:59.92%;">
  Div 3 @ row 1
</div>

If we add all the percentages together we get 100%. Because of this we would expect that all the 1000 pixels would be occupied by the three div elements. But there is in fact a problem if we look a little closer. 20.1% is 201 pixels, but what is 20.04%? If the browser renderes it as 200 pixels we have occupied 400 pixels of the 1000 pixels. Then we have the last 59.92%. 59.9% is 599 pixels for sure, but what about 59.92%? It can't be rendered as 600 pixels, because then the .02 pixels would use 1 pixel, while the .04% would occupy 0 pixels. The three browsers handles this problem differently:

• As you can see in figure 1.2 Opera renderes the 59.92% div as a 59% div. Because of this there is 1% left at the right which is 10 pixels.
• In figure 1.3 notice that Firefox renderes the second div with a width of 201 pixels, and because of that occupies the 1000 pixels.
• Figure 1.4 unveils that Internet Explorer leaves 1 pixel at the right, because the two first div elements get rendered as 400 pixels, while the last one gets painted on 599 pixels.

Issue 2: Clear

In figure 2.1 below we have three div elements and one input element. All have the styles float:left;width:50%;. Because there is 500 pixels available at the right of the first div, and the height of the input element is less than the height of the first div element, the second div is rendered at an intermediate row. We can call this the 1.5th row for simplicity. Observe that the third div is rendered at a full length new row.

If you want the second div to appear at a new full length row you have to set the style clear:left;. This means that the div will not accept any floating elements on its left side, and has to move down to a new full line to obey the CSS rule. Figure 2.2 to 2.4 illustrates this.

The third div introduces the Internet Explorer floating bug. In figure 2.3 you see an image of how this is rendered in IE, while you see the correct behavior in figure 2.4 which is a screen shot from Firefox. The golden div fixes this problem for us so that Internet Explorer is forced to behave properly in figure 2.5. Styles for this to happen are float:none; clear:both; height:5px; font-size:0px; line-height:0px;, and because the div element is a block level element it's default behavior is to occupy the full width of it's available space. To make the hack invisible you could apply the rule height:0px;. This is done in figure 2.6. In fact there are a lot of invisible float bug fixing div elements on this page to make it render correct in Internet Explorer. Just take a look at the source.