How to wrap text around an image in HTML/CSS

November 24, 2021

This question is a duplicate to this question but i need the answer to be a little more specific. I tried this answer but i got a problem. I’d like the text outside the div to be under the image, but i can’t figure how to do that.

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

<div id="container">
    <div id="floated">Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img </div>
    Should be here
</div>
Should be underneath

As you can see, there’s a div that i want to be here, and a div that i’d like to be underneath.

Any idea of how can i change this code to make my div be under the image?

>Solution :

Consider using clear: left property.

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

<div id="container">
    <div id="floated">Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img Img </div>
    Should be here
</div>
<div id="under">
Should be underneath
</div>