Skip to content
Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Automobiles
    • Cars
  • Gadgets
    • Phones
    • Android Phones

Categories

  • Automobiles (12)
    • Cars (7)
  • Blog (103)
    • Poems (2)
    • Space (2)
  • Command (2)
  • Education (2)
  • Entertainment (4)
  • Gadgets (9)
    • Phones (8)
      • Android Phones (4)
  • HTML Templates (11)
  • IT Training Institutes (1)
  • Lifestyle (4)
  • News (51)
  • Others (23)
  • Programming (296)
    • API (16)
    • CSS (83)
    • Database (4)
    • Hosting (1)
    • HTML (37)
    • JavaScript (117)
      • JQuery (27)
      • ReactJS (7)
    • PHP (116)
  • Python (3)
  • recipes (1)
  • SEE Result (1)
  • Server (3)
  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Automobiles
    • Cars
  • Gadgets
    • Phones
    • Android Phones
Close

Search

CSSOthers

How to wrap text around image using HTML and CSS ?

By Admin
January 14, 2021 3 Min Read
0

Normally while designing webpage we will need to use images and text within. Sometimes, we also might need to wrap the text around the image as shown in the image above.

In this article, we have provided HTML and CSS for wrapping the text around image.

Source Code :

<style type="text/css">
    .wrapper{
      box-shadow: 0 3px 10px rgb(24, 85, 138);
      font-size:19px;
      padding:10px 20px 10px 20px;
      width:80%;
      margin:0 auto;
      background: aliceblue;
      margin-top:40px;
      margin-bottom:40px;
    }
    .frame {
      box-shadow: 0 3px 10px rgb(24, 85, 138);
      height: 300px;
      width: 400px;
      float:right;
      margin-left:20px;
      margin-bottom:5px;
      overflow: hidden;
    }
    .zoomin img {
      height: 300px;
      width: 400px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease;
    }
    .zoomin img:hover {
      cursor: hand;
      width: 425px;
      height: 325px;
    }
    .wrapper p{
    	text-align: justify;
    }
    h1{
    	text-align:center;
    }
</style>
<div class="wrapper">
    <h1>Mumbai win 5th IPL title, two in a row</h1>
    <hr>
    <p>Defending champions Mumbai defeated Delhi Capitals by 5 wickets in the final of the 13th edition. Delhi, which made it to the final for the first time, failed to lift the title against mighty Mumbai. Mumbai have defeated Delhi in all four matches this season.</p>
    <div class="zoomin frame">
        <img src="https://letzcricket.com/uploads/news/2aydhcdMpl833IN1.jpg" />
    </div>
    <p>Mumbai chased down the target of 157 runs losing 5 wickets with 8 balls to spare. Captain Rohit Sharma (68) and Ishan Kishan (33) were the stars with the bat for Mumbai. Quinton de Kock scored 20 runs and Surya Kumar Yadav scored 19 runs. Anrich Nortje of Delhi took 2 wickets while Kagiso Rabada and Marcus Stoinis shared a wicket each.</p>
    <p>Earlier, Delhi Capitals won the toss at the Dubai International Cricket Ground and finished their innings at 156/7 from allotted 20 overs. Shikhar Dhawan added 15 runs in Delhi's innings as captain Shreyas Air scored 65 and Rishabh Pant 56 runs. Other Delhi batsmen could not touch the double digit score. Mumbai's Trent Boult took 3 wickets and Nathan Coulter Nile took 2 wickets. Jayant Yadav took one wicket.</p>
    <p>Mumbai had also beaten Delhi in the qualifiers to secure a place in the finals. Delhi defeated Sunrisers Hyderabad in the second qualifier to secure the final clash with Mumbai.</p>
    <p>Mumbai chased down the target of 157 runs losing 5 wickets with 8 balls to spare. Captain Rohit Sharma (68) and Ishan Kishan (33) were the stars with the bat for Mumbai. Quinton de Kock scored 20 runs and Surya Kumar Yadav scored 19 runs. Anrich Nortje of Delhi took 2 wickets while Kagiso Rabada and Marcus Stoinis shared a wicket each.Earlier, Delhi Capitals won the toss at the Dubai International Cricket Ground and finished their innings at 156/7 from allotted 20 overs. Shikhar Dhawan added 15 runs in Delhi's innings as captain Shreyas Air scored 65 and Rishabh Pant 56 runs. Other Delhi batsmen could not touch the double digit score. Mumbai's Trent Boult took 3 wickets and Nathan Coulter Nile took 2 wickets. Jayant Yadav took one wicket.</p>
    <p>Mumbai chased down the target of 157 runs losing 5 wickets with 8 balls to spare. Captain Rohit Sharma (68) and Ishan Kishan (33) were the stars with the bat for Mumbai. Quinton de Kock scored 20 runs and Surya Kumar Yadav scored 19 runs. Anrich Nortje of Delhi took 2 wickets while Kagiso Rabada and Marcus Stoinis shared a wicket each.</p>
    <p>
        Fairplay Award : 
        <strong>Mumbai Indians</strong>
        <br>
        Emerging Player of the Season : <strong>Devdutt Padikkal</strong>
        <br>
        Game Changer of the Season : <strong>KL Rahul</strong>
        <br>
        Super Striker of the Season : <strong>Kieron Pollard</strong>
        <br>
        Most Sixes Award : <strong>Ishan Kishan</strong>
        <br>
        Power Player of the Season : <strong>Trent Boult</strong>
        <br>
        Purple Cap : <strong>Kagiso Rabada</strong>
        <br>
        Orange Cap : <strong>KL Rahul</strong>
        <br>
        Most Valuable Player : <strong>Jofra Archer</strong>
    </p>
</div>

 

Tags:

CSSHTML
Author

Admin

Follow Me
Other Articles
Previous

Flip/Animate Cards using JQuery

Next

Simple Password Strength Meter using CSS and JavaScript

No Comment! Be the first one.

Leave a Reply

Your email address will not be published. Required fields are marked *

FIFA World Cup 2026 Predict and Win by SportsGuff

Recent Posts

  • Unpacking Nepal’s Record Rs 2.12 Trillion Budget and What It Means for You
  • How to Write a Strong Scholarship Application: The Ultimate Step-by-Step Guide
  • How to Prepare for Exams Without Stress: The Ultimate Science-Backed Guide
  • Chiranjibi Adhikari Appointed Acting President of CAN Federation
  • How to Design a Student Marksheet Using HTML and CSS

Tags

adsense ai animate animation animation using HTML and CSS API blog calculator chatgpt Cryptocurrency CSS css animation design Email Facebook featured filemanager file manager free template google htaccess HTML image Instagram interview javascript JQuery jquery ui NADA AutoShow NADA Auto Show 2024 password PHP Progressive Web App PWA QR random react reactjs Rotate travel Twitter vpn youthforum youthsforum youtube

About Us

At Youths Forum, we are passionate about sharing knowledge that empowers students, educators, professionals, and technology enthusiasts.

Our Mission

Our mission is simple: to make technology and education accessible, understandable, and beneficial for everyone. We strive to create content that helps our readers learn new skills and stay updated with industry developments.

RSS RSS

  • Unpacking Nepal’s Record Rs 2.12 Trillion Budget and What It Means for You Admin
  • How to Write a Strong Scholarship Application: The Ultimate Step-by-Step Guide Admin
  • How to Prepare for Exams Without Stress: The Ultimate Science-Backed Guide Admin

Quick Links

  • Stock Market Live
  • Parliament Election 2082
Copyright 2026 — Youths Forum. All rights reserved. Blogsy WordPress Theme