Does Your Browser Get This Right?

Odds are, the answer to that question is "no". However, we'll provide the markup to find out for sure.

Here's how this should work: just before the beginning of the first paragraph are two tags: IMG and TABLE. The IMG has a class of floatr, and the TABLE a class of side. The document has an embedded style sheet which contains the following rules:

   IMG.floatr {float: right;}
   TABLE.side {float: right; clear: right;
      background-color: yellow; width: 100px;}

...and you can find, at the end of this document, a picture of roughly how this page should be rendered.

Now, what should happen is that the image should float to the right side of the parent element-- in this case, the BODY. Most browsers get this part right. The next element in the document is the TABLE, which should float to the right, but appear below the image (because of the clear). This is where most browsers break down.

MSIE4 for Win95, for example, will float the image and table correctly, but start the first paragraph just below the end of the table, as though the paragraph had been set to clear: right, which is most certainly not the case. MSIE4 for the Macintosh, on the other hand, will float the image and start the first paragraph right under it-- the table disappears completely!

MSIE5b1 for Win95 floats both image and table, and starts the first paragraph in the right place, but the table is floating to the left of the image, apparently ignoring the clear: right rule.