How to code this into css?

I'm trying to get away from tables and my last two designs were totally table less. Anyhow I'm working on another one (for myself this time) and I'm trying to figure out how to code the following picture (snapped within photoshop) into nice css.

I don't want any tables and this has to be fine in the space provided (62% screen width) without messing up.

 

float the images right, and apply a right margin.

 

If I were you I would set the image into a separated div as backgound-image (same width, height value as the imgage has). After that you will be able to position it wherever you want even with relative or absolute way. Of course you will be able to define the float direction also.

 

Thats a winner, I think I'll have to create few divs to make sure the lines expand correctly.. Anyhow rep for you

 

enclose all in one div first then do another two for the layouts, then the rest, do separate divs in each content

<style type="text/css">
#left
{
font-family:verdana; /*You can put any font in here*/
float:left;
width:80%; /* you can change it in terms of pixels */
}
#right
{
font-family:verdana; /*You can put any font in here*/
float:right;
width:20%; /* you can change it in terms of pixels */
}
</style>
<div style="margin-left:auto;margin-right:auto;">
<div id="left">
<!--Contents here--></div>
<div id="right"><!--images here--></div>
</div>

PHP: