How Can I Make Text Wrap Around an Image Using HTML and CSS?

Wrapping Text Around an Image Using HTML/CSS

Question:

Can you design a block of text to wrap around an image like this:

[Image of text wrapping around an image]

Answer:

Yes, this is possible by floating the image container.

HTML:

<div>

CSS:

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

Explanation:

• The #container div defines the boundaries of the text and image.
• The #floated div contains the text that will wrap around the image.
• The float: left property on the #floated div makes it float to the left of the container.
• The width property on the #floated div defines how wide the text will be.

Live Example:

[JSFiddle](http://jsfiddle.net/kYDgL/)

The above is the detailed content of How Can I Make Text Wrap Around an Image Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!