CODEWITHSUNDEEP
htmlcss
URL87
URL87

Reputation: 11012

How to make the text wrap an image?

Suppose there is -

CSS - 

img {
    display: inline-block;
}

div {
    display: inline-block;
    vertical-align: top;
    height: 150px;
    width: 150px;
}

HTML - 

<div>
<img src="img/koala.jpg" />
    wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image 
</div>

I want the text between the <div></div> would be limited according the size's in - 

div {
      height: 150px;
     width: 150px;
}

and wrap the image it close to ,

something looks like -

enter image description here

Here the jsFiddle I did so far .

The above jsFiddle just write on the top of the image and then write the rest of the text below it .

Upvotes: 1

Views: 62

Answers (2)

Ren&#233; Roth
Ren&#233; Roth

Reputation: 2106

I don't know exactly what you want to achieve, do you mean something like this JSFiddle?

If so, the magic lies in setting float:left; for your image.

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68596

You could float the image, e.g

img {
  float:left;
}

jsFiddle here.

You may want to give the image an ID or class, and use that selector instead (if you plan on using multiple images on your page).

Upvotes: 2

Related Questions