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 :
- You can also use CSS shape-outside Property depending on the shape of your image.
- Align images to the right, left, or center in HTML for diverse layouts.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).
<!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.
<!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:
Example 3: Using table tag 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.
<!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 :