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

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).

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wraping 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
                    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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wraping 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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.