How to wrap text around an image using HTML/CSS

Question

I want to design a block of text like the following picture:

enter image description here

Question whether this is possible?

possible duplicate of [Wrapping text around an image with indentation and justify](http://stackoverflow.com/questions/15209389/wrapping-text-around-an-image-with-indentation-and-justify) — mavrosxristoforos, Oct 04 '13 at 11:05
Are you trying to wrap text around an image as in regular `
` tags and so on, but you also mentioned ``, which could be a totally different problem. Why don't you post your HTML if you have some? Thank you. — Marc Audet, Oct 04 '13 at 12:44
Yeah, you'd just float the php image to the left, and the text will wrap around it :-) — Jack, Dec 18 '13 at 15:13

BeNdErR · Answer 1 · 2015-04-20T21:58:08.407

145

you have to float your image container as follows:

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

FIDDLE

http://jsfiddle.net/kYDgL/

edited Apr 20 '15 at 21:58

answered Oct 04 '13 at 10:56

BeNdErR

17,471
21
72
103

Danield · Answer 2 · 2017-01-30T10:33:51.703

With CSS Shapes you can go one step further than just float text around a rectangular image.

You can actually wrap text such that it takes the shape of the edge of the image or polygon that you are wrapping it around.

DEMO FIDDLE (Currently working on webkit - caniuse)

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Also, here is a good list apart article on CSS Shapes

Is there any option how to wrap "AROUND" the object so that the object can be in the middle? — redestructa, Jul 07 '16 at 11:22
@redestructa check out CSS exclusions.See my post: http://stackoverflow.com/a/19895616/703717 It's currently only supported in IE - http://caniuse.com/#feat=css-exclusions — Danield, Jul 07 '16 at 11:45

T.Todua · Answer 3 · 2019-06-09T09:09:17.663

33

Addition to BeNdErR's answer:
The "other TEXT" element should have float:none, like:

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>

edited Jun 09 '19 at 09:09

answered Oct 27 '14 at 09:19

T.Todua

53,146
19
236
237

this is the only way I could get this to work.. And cleanest solution. – andygoestohollywood Dec 06 '14 at 16:23
float:none was what saved me! Kept trying to float:right the second element to no avail. – bkunzi01 Apr 16 '18 at 16:10

Jithin B · Answer 4 · 2016-06-24T07:28:19.337

14

If the image size is variable or the design is responsive, in addition to wrapping the text, you can set a min width for the paragraph to avoid it to become too narrow.
Give an invisible CSS pseudo-element with the desired minimum paragraph width. If there isn't enough space to fit this pseudo-element, then it will be pushed down underneath the image, taking the paragraph with it.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

edited Jun 24 '16 at 07:28

answered Sep 01 '15 at 06:30

Jithin B

1,099
10
13

I think your answer may save me some bacon. I was having a problem with left floated images stacking up in a responsive design. With my default image width being 30% and images on both sides, I could sometimes have a text column only 4 characters wide. – Sherwood Botsford Jul 08 '17 at 16:50

score 5 · Answer 5 · answered Jan 22 '22 at 03:52

2022 Update

I was trying to achieve this type of result with the least amount of code possible. This is what worked for me.

#wrap {
    margin: 3em 8em;
}
.left {
    float: left;
    margin-right: 1.5em;
}
.right {
    float: right;
    margin-left: 1em;
}
p {
    margin-bottom: 2.5em;
    overflow: hidden; /* this is what keep the <p> from wrapping */
}
p:last-child {
    overflow: visible; /* this is an example of the browser default */
}

<div id="wrap">
<img class="left" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
<img
class="right" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
<img
class="right" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>

@YuriyKravets : I personally find that flexbox is not very flexible in my honest opinion. The irony of the name. You cant maneuver around a flex. — Grogu, Aug 15 '22 at 16:39
@Grogu how can I place the 3rd `.img` at the bottom-right corner with the text still floated around it? I can't seem to achieve that. Thanks — Le_Buzz, Sep 04 '22 at 01:57

score 1 · Answer 6 · edited Sep 09 '22 at 06:47

Try following code:

        .my-image{
            width: -webkit-fill-available;
            padding-top: 10px;
            padding-left: 6px;
            padding-right: 6px;
        }

    <div style="width:100%;">
        <div style="float: right;width: 40%;">
            <img class='my-image' src="https://via.placeholder.com/150/92c952">
        </div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:green;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:blue;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:red;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:green;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:blue;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:red;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:green;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:blue;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:red;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:green;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
        <div style="float:none; background:blue;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>

How to wrap text around an image using HTML/CSS

6 Answers6

DEMO FIDDLE (Currently working on webkit - caniuse)

2022 Update

Linked

Related