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

Folding the text over a picture is very alluring for any sort of site. Presently the picture can be in various shapes or the fundamental square shape. We need to wrap that picture with the text. By utilizing HTML and CSS wrapping a picture with the text is conceivable and there are numerous ways of doing as such in light of the fact that the state of any picture isn’t consistent. Wrapping a text implies changing/folding text over a picture. In HTML, we can either adjust the picture on the right half of the text, or to the left, or to the middle. In CSS, other than these we can likewise embed the pictures all around or square shape, and so forth and can fold a text over it. You can likewise utilize CSS shape-outside Property relying upon the state of your picture.

Beneath models show the above approach:

Model 1: In this model, the picture is drifting right half of the screen and the text is wrapping the picture. In this model, we don’t need shape-outside property in light of the fact that the shape picture is usual(square).

  <html>   <head>     <title>         Wrapping an Image with the text                <style>         body {             margin: 20px;             text-align: center;         }         h1 {             color: green;         }         img {             float: left;              margin: 5px;         }         p {             text-align: justify;             font-size: 25px;         }         <body>     <h1>GeeksforGeeks           <b>         A Computer Science         Portal for Geeks                <div class="square">         <div>              <img src=  "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png"                     alt="Longtail boat in Thailand">                               <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.                    

Model 2: In this model, we will wrap diverse shape pictures and here we will utilize CSS shape-outside property for better review insight.

  <html>   <head>     <title>         Wrapping an Image with the text                <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;         }         <body>     <h1>GeeksforGeeks           <b>         A Computer Science Portal for Geeks            <div class="round">         <article>GeeksforGeeks                  <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.           
• HTML is the underpinning of pages, is utilized for page advancement by organizing sites and web apps.You can gain HTML starting from the earliest stage by following this HTML Tutorial and HTML Examples.
• CSS is the reinforcement of pages, is utilized for site page improvement by styling sites and web apps.You can gain CSS starting from the earliest stage by following this CSS Tutorial and CSS Examples site.

## Using Internal CSS

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to wrap the text.

• <!Doctype Html>
• <Html>
• <Title>
• Wrap a text around an image
• </Title>
• <Body>
• Hello User!….   <br>
• Html Tutorial   <br>
• This page helps us to understand how to wrap the text around an image in Html using CSS.
• </Body>
• </Html>

Step 2: Now, we have to type the CSS code for aligning the image. So, we have to type the <style> tag in the <head> tag just after the <title> tag.

• <Title>
• Wraping text around image
• </Title>
• <style>
• </style>

Step 3: And, then we have to define the various properties for wrapping the text around the image. So, we have to define a class.

• .wrapingimage
• {
• float: left;
• margin: 30px 12px 3px 4px;
• border: 2px solid blue;
• }

Step 4: Now, we have to use the defined class in the body tag as shown in the following screenshot.

• <div class=“wrapingimage”>
• <img src=
• “https://www.javatpoint.com/images/logo/jtp_logo.png” height=“100” width=“100”
• alt=“image”>
• </div>

Step 5: And, at last we have to save the Html file and then run the file in the browser.

• <!DOCTYPE html>
• <Html>
• <Title>
• Wraping text around image
• </Title>
• <style>
• .wrapingimage
• {
• float: left;
• margin: 30px 12px 3px 4px;
• border: 2px solid blue;
• }
• </style>
• <body>
• Hellooo User!!!….
• <div class=“wrapingimage”>
• <img src=
• “https://www.javatpoint.com/images/logo/jtp_logo.png” height=“100” width=“100”
• alt=“image”>
• </div>
• <p>
• If we want to wrap the text around an image in Html document using Internal CSS then we have to follow the steps which are given below. Using these steps we can easily wrap a text.
• Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to wrap the text.
• Step 2: Now, we have to type the CSS code for aligning the image. So, we have to type the style tag in the head tag just after the title tag.
• Step 3: And, then we have to define the various properties for wrapping the text around the image. So, we have to define a class.
• </p>
• </Body>
• </Html>

Also ReadHow to Install Chrome in Ubuntu?