How to prevent text to overlap the image?

Question

Text is overlapping the image.
This is screenshot of overlapped contents:
CSS class of text:

._text
{
    position:relative;
    float:left;
    text-align:left;
    margin-left:30px;
    font-size:14px;
    color:#FF0000;
    z-index:1;
}

CSS class of image:

._images
{
    position:absolute;
    float:right;
    margin-top:18px;
    margin-left:165px;
    width:170px;
    height:170px;
    z-index:0;
}

Give me some solution to move the text away from the image.
Thank you in advance.

Edition
Here is HTML (as demanded in comments) dynamically returned by ajax:

<div id="rNo">(12 / 14)</div>
    <img class="_images" src="Buildings_files/school2.png" align="right">
    <h4 class="building_heading">School</h4>
    <span id="m_text_area_body">School is .... <br><br></span>
    <span class="_text">» Upgrade Governor Palace to (level-10) to construct this building. You have suffecient golds to construct it</span>
</div>

Answer 1

add padding to the right like this

 ._text{padding-right: 170px;}

Or set width of your text like this

._text{width: /*distance between left of text and image*/;}

And you can also try giving both the text and the image the same z-index like this

 ._text{z-index:1;}  ._images{z-index:1;}