I have been trying (for 2 days) to create a css layout that consists of tabular data and an image aligned to the right of the entire table. You can view the page at:
I would like the table to "jump" underneath the image if the browser window is too small to fit the data and image side by side. The page is behaving correctly in IE6/PC, but in Firefox the image overlaps the table as you decrease the size of the viewport.
I have attempted to create the layout using floated divs for the tabular data instead of a TABLE, which can be seen here:
Again this page works satisfactorily in IE6, but in Firefox it seems that it will not flow text within a floated div (see the Notes div, that jumps underneath the image immediately the photo comes in contact with it, as opposed to the text flowing within the div). Also, I have used a <div style="clear: left"> to stack the tabular data on top of one another, (clear: both would immediately push it beneath the floated right image), but in Firefox when the data divs are pushed below the image, they do not stack correctly. (Even though this seems to be a correct interpretation of the property!)
Basically, I will award the points to anyone who can mimic the IE6 behaviour of either page in Firefox.