How to prevent text to overlap the image?

Text is overlapping the image.
This is screenshot of overlapped contents: How to prevent text to overlap the image?

This is CSS class of text:

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

This is 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.

Here is HTML code (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>

-------------Problems Reply------------

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;}

Category:html Views:5 Time:2019-03-13
Tags: html css

Related post

Copyright (C), All Rights Reserved.

processed in 0.161 (s). 11 q(s)