Put the content and the photo in the same element and float the photo right with appropriate margins on both your content and the image. This will give the "appearance" of two columns. Especially if you use a background image on the containing element that divides the two sections visually.
Actually, looking at your example html, it seems to me that you are overlooking the purpose of the much-maligned table element. It is for "tabular" data, that is intended to be read from left to right, top to bottom...exactly what you want to do here. And the html markup for a table in this instance is actually lighter than containing/floating/clearing divs, and avoids all the layout issues of the different browsers. Here’s my take on it, using tables (code and sample images below, no need of a web server to view)
That is correct.
Personally, until the "box model" is more consistant not only between browsers but even in the best of them, I often make use of simple tables, no more than two or three rows and two columns, for basic layout. I try to keep a balance between code clutter, accessibility, and what works with a minimum of trouble. I’m not afraid to use any tool just because it’s not "fashionable" at the moment.