CODEWITHSUNDEEP
htmlcss
Anjunadeep
Anjunadeep

Reputation: 91

How can I make my text wrap around my image?

In my website, I have a page like this:

<div style="float:left; width: 75%;  padding:15px 0px 0px 0px;">
    <h1>HEADING</h1>
    <h3>TEXT TEXT TEXT</h3>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p> 
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
    </div>
    <img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;>

As you can see,I've tried floating my image right and my text left as all the other suggested questions prompted, but that doesn't seem to make it wrap around. Also, I want to make it appear like this on mobile:

HEADING
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
etc...
IMAGE

What else can I do to achieve this?

NOTE: I am aware how much you guys hate inline css lmao. It's just that I'm in such a situation that I must do so. It's hard to explain. :/

EDIT: I used the code provided in the answers:

<div style="width: 75%;padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right;    width:25%; min-width:200px;" />
 <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
 </p>
 <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
 </p>
 <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
 </p>
</div>

This works fine on the PC view, but viewing it on mobile is a whole different story... the text doesn't wrap around the image at all... how can I fix that?

Upvotes: 0

Views: 82

Answers (2)

user4563161
user4563161

Reputation:

Put your image at the top most point where you want text to wrap it.

It also mus be in its container

another note you where missing " /> from your img

you also didn't end your <p> tags correctly </p>

<div style="width: 75%;padding:15px 0px 0px 0px;">
  <h1>HEADING</h1>
  <h3>TEXT TEXT TEXT</h3>
  <img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;" />
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
</div>

update on request

Here is how you get your image to sit at the bottom of your text even although its at the top when in mobile

div {
  width: 75%;
  padding: 15px 0px 0px 0px;
  display: table;
}
img {
  width: 25%;
  min-width: 200px;
  display: table-footer-group;
}
p,
h1,
h3 {
  display: table-caption;
}
<div>
  <h1>HEADING</h1>
  <h3>TEXT TEXT TEXT</h3>
  <img src="http://dummyimage.com/300x300/000/fff" />
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
</div>

Upvotes: 2

pcs
pcs

Reputation: 1854

Put your image at first and also you mess close bracket / in your image tag.

    <img src="http://dummyimage.com/300x300/000/fff" style="float:right; 
width:25%; min-width:200px;" />

Upvotes: 0

Related Questions