How to attack this?

[seodevhead]

Hey guys. I am interested in knowing how you guys would attack a small css setup like this. All I want is to have a div box with some content and on the right side (appearing to layer the div on top) a picture. If all I did was try to explain it, it might be hard to picture it... so I made an example of what I am looking to code below.

How would you go about coding something like this? Relative positions? Floats, etc???

[deathshadow]

Well, several questions come to mind... Is the content area on the left going to be a fixed size, or dynamic? Does it have to be 'centered' to the image vertically?

Fixed size, that's easy. Float the image right, set the size of the left content area and add padding to the top to push it down 'centered'

Dynamically sized, does it have to be centered top to bottom? If not, that's just float the image left and let the text fall where it may.

If it does have to be centered top to bottom with dynamic sizing in height - THAT's going to be a headache and a half... to the point you might want to pull the plug on DIV alltogether and use a table - JUST because you are going to spend so much time futzing with 30-40 lines of CSS trying to get IE, Opera and Safari to display it like Firefox does - all to do what 6 lines of table code (supported by five or six lines of CSS) can do 'out of the box'.

Although you MAY have to resort to downgrading to transitional in that case, just to get the align property back.... Margin-top/bottom IF THEY WORKED all the time would be a better solution, but the problem with that is they don't in the major browsers yet.