Positioning elements like a table, without using the table tag

I am trying to position some stuff in 3 columns. The first column has an icon, 2nd column has text, and the 3rd column has an image.

I wish to do this without using the Table tag. Using CSS I have gotten the first 2 columns placed correctly, here is an image:

On the right, I need to add another image, without disturbing the text on开发者_如何转开发 the left.

This is my HTML code (stripped down to the basics):

            <img src="Images/icon-1.png" /> 
            <span class="content-title">My title 1</span> 
            <p>
            Here is my text ...
            </p>
            <br />


            <img src="Images/Icon-2.png" /> 
            <span class="content-title">My Title 2</span> 
            <p>
            Here is my text ...
            </p>
            <br />

And the CSS that emulates the table layout:

.content-title
{
    font-size: 26px;
    font-family: Helvetica,Arial,sans-serif;
    color: #363636;
    top: -28px;
    position:relative;
    left:+10px;
    font-weight: bold;
}

#content-benefits p
{
    margin-left:80px;
    top:-30px;
    position:relative;
    width:325px;
}

My issue is, that I can't figure out how to place my image on the right, without making it's position:absolute;, but if I do that, I have to (AFAIK) use JavaScript to place the images relatively to their corresponding paragraphs.

If you want another image add it to the HTML before the rest of the "section" and then float it right with:

img {
   float: right;
}

On another note, why aren't you using heading tags to display your headings?

You could use the css display:table to make it apear using a table take a look at the docs for this found here

Place the image after the titles span end tag

<img src="Images/icon-1.png" /> 
            <span class="content-title">My title 1</span> 
<img src="Images/icon-1.png" /> 
            <p>
            Here is my text ...
            </p>
            <br />

if i properly understand your layout i would do this

<img style="float:left; width:80px" src="image/icon-1.png"/>
<div style="width:405px">
  <img style="float:right; width:80px"/>
  <div style="float:left; width:325px">
    <span/>
    <p>
    ...
    </p>
  </div>
</div>

you wont need the other positioning you used

if you cannot change the markup, than put width to the span and p and float:left, and put float:right and width to img

putting float automatically converts the element to display:inline-block which mean that it no longer distributes to the free page width, but takes the minimal allowed space (set by width) and stays rectangular. This way it becomes something like a column.