How to push this image upwards into a paragraph

Question

I am developing an application that lets businesses post to a noticeboard. Each post is a div of 320px width. The content of the post is in paragraphs and at the foot of the post, I am putting the business' logo, as follows:

<div class="post">
  <p>Lorum ipsum ...</p>
  <p>Lorum ipsum ...</p>
  <img src="...">
</div>

The logo doesn't look very good just plonked at the bottom of the post, so now I am trying to visually integrate it better. I would like to float it to the right, and push it up, say, 30px, and have the text flow around it.

I have tried floating right and setting a negative top margin, but this just put the image under (or over) the paragraph text. I tried putting it inside the ending p tag, with similar results. I also tried changing the display to inline-block (instead of floating it), but got similar results again.

Answer 1

By definition of floats that is not possible.

Thus you have two options:

A. To reorder DOM elements (by JS) and so you will have rest of the text wrapping around that floating image:

<div class="post">
  <img src="..." float="right">
  <p>Lorum ipsum ...&lt;/p>
  <p>Lorum ipsum ...&lt;/p>
</div> 

B. Drop the text wrapping requirement. In this case you can use you markup as it is now:

<div class="post">
  <p>Lorum ipsum ...&lt;/p>
  <p>Lorum ipsum ...&lt;/p>
  <img src="...">
</div> 

but with these styles:

.post { position: relative; }
.post > p { margin-right: XXXpx; /* room for the image */ }
.post img { position:absolute; right:0; top:0 } /* move it to top/right corner */

There are no other options with modern CSS : either to reorder DOM or to drop text wrapping.

Answer 2

You are probably going to need to move the image up to the top. Once you do that getting things to fall into place will be a snap. I added a code snippet below. I used a square div to stand in for an image but the concept is the same for real images.

.img {
    display: block;
    width: 50px;
    height: 50px;
    float: left;
    background: blue;
    margin: 0 10px 10px 0;
}

<div>
    <div class="img"></div>
    <p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
    <p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
</div>

Alternatively, if you must have the image last for some reason there will not be a good way to have the text wrap under the image. But you can djust the img to the top like so:

.container {
  position: relative;
}

p {
  margin-left: 60px;
}
.img {
  background: blue;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="container">
    <p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
    <p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
    <div class="img"></div>
</div>

On an aside, you can also use js to reposition the image after the document has already loaded as well.

Answer 3

Try applying .css to the image directly using a class tag.

<img class="imgleft" src="image.jpg">

and in your .css file something like this:

.imgleft {
float: left;
border: 1px solid #90b905;
margin: 5px 10px 10px 15px;
padding: 5px;
}