Question

I have created a image with some text as shown in figure.

<span class="productname ">Excusite Beauty</span>
<img src="xy.jpg" data-attr="productimg" class="productimg " />

My css is

.productimg
{
float:right;
margin-top:15px;
height:120px;
margin-right:2%;
border:2px double  #0ff;
width:150px;
right:0px;
position:absolute;
}
.productname
{
font-size:1.2em;
display:block;
float:left;
}

How can i protect the overlapping of text and put the text in next line if it is long.
How to do it using css…plz help

after removing position and right=0

Answer 1

You are absolutely positioning the product image. This takes it out of the normal “flow” of the document, and will cause this overlap.

Remove position: absolute from .productimg (you can go ahead and remove right:0px; as well) , and the text should wrap around the image properly. To allow the text to float around the image, you can either move it before .productname or float .productname and give it a width.

codepen

HTML

<div class="product">
  <img src="xy.jpg" data-attr="productimg" class="productimg " />
  <span class="productname ">Excusite Beauty</span>
</div>

CSS

.productimg {
  float:right;
  /* margin-top:15px; */
  height:120px;
  border:2px double  #0ff;
  width:150px;
}
.productname {
  font-size:1.2em;
  display:block;
   width:150px
}
.product {
  width:300px;
}