Diagram A can be accomplished by having a valign=”top” and align=”right” on the parent TD. The red rectangle is a div with style=”float:right”. This works on most browsers, but not IE. IE will put a linebreak before the div. The Text is not surrounded in any tag. It is the first thing in the TD.
The problem with the setup in Diagram A was solved by containing the text inside a Div with style=”float:right” and placing that div AFTER the original red div, causing the layout in Diagram B. This appears to work in all browsers, but I have doubts that I’m accomplishing this layout requirement in the correct way.
Is there a better way to accomplish this?
I can’t use a table, because the div on the right side has a slightly variable width and the distance between the green text and the left side of the right-side Div is very important. Basically, the absolute position of the text on the left depends on what happens in the right side div.
Have you tried switching doctypes to get better control of your layout?
Specifically moving to one of the strict doctypes (A List Apart)
UPDATE
Adding Daniels link to Wikipedia’s comparison of doc types.