Float bugs for Opera 5

Example 1

The first example is a simple float. As you see, the float is in an upper position with respect to the top edge of the silver div element. The float will be shifted up from the right position by the same value of this p element bottom margin less the silver div top margin, if the last is greater than the first there won't be any shift. Take a look to the code and you will see that the floating div element is a child of the silver div, so actually, the float is getting outside of its content block. There are four possible workarounds, you can wrap the silver div element inside another div, you can write the float code before and in the same nesting level of the silver div, you can set a top border or set the proper margins as described above.

This is the code used for this example.

...

<div style="background:silver;">

  <div style="float:left;width:100px;height:100px;background:gray;">

    FLOAT

  </div>

  Text Text Text...

</div>

...

Example 2

We have added a left margin to the silver div, the gray float is still a child from the silver div and the black float is a sibling element. Again we have an up shift but we know how to deal with it, in this case wrapping the silver div inside another would be the best, but unfortunately this doesn't solve the left shift. To push the gray float to its position we could add a right margin to the black float.

This is the code used for this example.

...

<div style="float:left;width:100px;height:100px;background:black;color:white;">

  FLOAT

</div>

<div style="margin-left:150px;background:silver;">

  <div style="float:left;width:100px;height:100px;background:gray;">

    FLOAT

  </div>

  Text Text Text...

</div>

...