html - How to prevent text to overlap the image? -


text overlapping image.
screenshot of overlapped contents: enter image description here
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 solution move text away image.
thank in advance.

edition
here html (as demanded in comments) dynamically returned 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 .... <br><br></span>     <span class="_text">» upgrade governor palace (level-10) construct building. have suffecient golds construct it</span> </div> 

add padding right

 ._text{padding-right: 170px;} 

or set width of text

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

and can try giving both text , image same z-index this

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

Comments

Popular posts from this blog

java - Andrioid studio start fail: Fatal error initializing 'null' -

android - Gradle sync Error:Configuration with name 'default' not found -

StringGrid issue in Delphi XE8 firemonkey mobile app -