How to wrap the text around an image using HTML and CSS ? - GeeksforGeeks

30 Jul, 2021
Wrapping the text around an image is quite attractive for any kind of website. Now the image can be in different shapes or the basic square shape. We have to wrap that image with the text. By using HTML and CSS wrapping an image with the text is possible and there are many ways to do so because the shape of any image is not constant. Wrapping a text means adjusting/wrapping text around an image. In HTML, we can either align the image on the right side of the text, or to the left, or to the center. In CSS, besides these we can also insert the images in a circle or rectangle, etc. and can wrap a text around it. You can also use CSS shape-outside Property depending on the shape of your image.Below examples illustrate the above approach:Example 1: In this example, the image is floating right side of the screen and the text is wrapping the image. In this example, we don’t require shape-outside property because the shape image is usual(square). 
html
<!DOCTYPE html><html>  <head>    <title>        Wrapping an Image with the text    </title>          <style>        body {            margin: 20px;            text-align: center;        }        h1 {            color: green;        }        img {            float: left;             margin: 5px;        }        p {            text-align: justify;            font-size: 25px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <b>        A Computer Science        Portal for Geeks    </b>          <div class="square">        <div>             <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png"                    alt="Longtail boat in Thailand">         </div>                    <p>            How many times were you frustrated while looking            out for a good collection of programming/algorithm            /interview questions? What did you expect and what            did you get? This portal has been created to            provide well written, well thought and well            explained solutions for selected questions.            An IIT Roorkee alumnus and founder of GeeksforGeeks.            He loves to solve programming problems in most            efficient ways. Apart from GeeksforGeeks, he has            worked with DE Shaw and Co. as a software developer             and JIIT Noida as an assistant professor. It is a            good platform to learn programming. It is an            educational website. Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course.        </p>      </div></body>  </html>
Output:  
Example 2: In this example, we will wrap different shape images and here we will use CSS shape-outside property for the better viewing experience.  
html
<!DOCTYPE html><html>  <head>    <title>        Wrapping an Image with the text    </title>          <style>        body {            margin: 20px;            text-align:center;        }        h1 {            color: green;        }                  /* This div design part is            used as an Image */        .round {            width: 200px;            height: 200px;            border-radius: 50%;            text-align: center;            font-size: 30px;            float: left;            font-weight: bold;                          /* Change the shape according                to the image */            shape-outside: circle();            background-color: Green;            color: white;        }                  article{            padding-top: 75px;            display: inline-block;        }                  p {            text-align: justify;            font-size: 22px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <b>        A Computer Science Portal for Geeks    </b>      <div class="round">        <article>GeeksforGeeks</article>    </div>            <p>        How many times were you frustrated while looking        out for a good collection of programming/        algorithm/ interview questions? What did you        expect and what did you get? This portal has been        created to provide well written, well thought and        well explained solutions for selected questions.        An IIT Roorkee alumnus and founder of        GeeksforGeeks. He loves to solve programming        problems in most efficient ways. Apart from        GeeksforGeeks, he has worked with DE Shaw and        Co. as a software developer and JIIT Noida as        an assistant professor. It is a good platform        to learn programming. It is an educational        website. Prepare for the Recruitment drive of        product    based companies like Microsoft, Amazon,        Adobe etc with a free online placement        preparation course.    </p>  </body>  </html>
Output:  
 
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sumitgumber28
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?