Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jun, 2022

Wrapping the text around an image is quite attractive for any kind of website.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. 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. We don’t require shape-outside property here 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=
        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: 
 

 Using table tag : 

Using this we are going to create a table and inside tables one column we will put image and into another column whatever information you want to insert.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text around image</title>
</head>
<body>
  <h1 style="color: green; text-align: center;">
    GeeksforGeeks
  </h1>
  <h3 style="color: black; text-align: center;">
    A computer science portal
  </h3>
  <br>
  <table cellspacing="10">
    <tr>
      <td>
        <img src=
          alt="Longtail boat in Thailand">
      </td>
      <td>
          
<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>
  
      </td>
    </tr>
  </table>
</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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!