How to push this image upwards into a paragraph - html

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 ...</p>
<p>Lorum ipsum ...</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 ...</p>
<p>Lorum ipsum ...</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;
}

Answer 4

If the size of the image is known before hand, you can reserve space for the image with a pseudo element
.post {
width: 320px;
border: 1px solid red;
position: relative;
}
.post:before {
content: "";
width: 80px;
height: 80px;
float: right;
background-color: lightgreen;
}
.likeimg {
width: 40px;
height: 40px;
background: red;
top: 20px;
right: 20px;
position: absolute;
}
<div class="post">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div class="likeimg"></div>
</div>
The green box is the pseudo element (made green just for demo purposes), that in the dom is in the appropiate place to make it float. (before the ps)
Then, the image if absolutely positioned in the reserved place

Answer 5

.post {
width: 320px;
border: 1px solid red;
position: relative;
}
p
{
text-align:justify;
word-break:break-all;
}
.post:before {
content: "";
width: 80px;
height: 80px;
float: right;
}
.likeimg {
width: 40px;
height: 40px;
background: red;
top: 20px;
right: 20px;
position: absolute;
}
<div class="post">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div class="likeimg"></div>
</div>
i hope this may help you

Answer 6

This is the simple one I think. Just place your image inside the first <p> tag, as in:
<div class="post">
<p><img src="..."> Lorum ipsum ...</p>
<p>Lorum ipsum ...</p>
</div>
Then floating it to the right and push it up and have the text flow around it.
But before it, add new class selector inside the image
, say, .imgfloat. so, that will be like this:
<div class="post">
<p><img class="imgfloat" src="...." alt=""/> Lorum ipsum ...</p>
<p>..Lorum ipsum ......</p>
</div>
Next, add the property and the value of the selector, like this:
.imgfloat{
float:right;
margin-left:17px;
margin-top:1px;
margin-right:1px;
margin-bottom:7px;
text-align:justify;
}
So, the display would be like this:
For Demo, visit Here.
Hope this helps you.

Answer 7

Float the image right, and everything else left.
.post p {
float: left;
clear: left;
}
.post img {
float: right;
}
See Fiddle
If your logos are relatively small, it might be enough just to float the last non-image element left, e.g.
.post p:last-child {
float: left;
}

Answer 8

You could try floating the image (I've used a div to simulate the image in the sample below) before the last paragraph and then adding float:none to the last paragraph:
<div style="width:320px;">
<div style="float:left; width:30%; height:100px; background:#ebebeb; margin:10px 10px 0 0"></div>
<p style="float:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat sem quis erat tincidunt facilisis. In posuere urna at ex porttitor, id maximus ex aliquam. Morbi orci lectus, dapibus venenatis suscipit ac, mattis in lectus. Integer a feugiat ex.
Donec non nibh sit amet mi lacinia dignissim. Mauris nulla turpis, volutpat a iaculis ac, elementum vel ipsum. Nulla sed sem sagittis, posuere neque eget, fermentum ex. Etiam mollis pharetra lorem, id tincidunt nisi scelerisque in. Integer et leo
laoreet, facilisis sapien a, vulputate urna. Vestibulum at interdum est, sit amet tincidunt neque. Donec luctus justo vel justo pellentesque, in congue.</p>
</div>

Answer 9

The layout you want to achieve can be done only using Javascript, as in this example where we use jQuery WrapLines to divide paragraph in lines that have class line and CSS:
.post p:last-of-type .line:nth-last-of-type(2):before {
content: ' ';
display: block;
width: 105px;
height: 35px;
float: right;
}
.post img {
float: right;
position: relative;
bottom: 45px;
}
JS part is simple:
$(".post p").wraplines({
lineClassPrefix: 'line line_'
});
It is still not perfect, because after adding the block the text may expand for one line more.
If you want a pure CSS solution, than simply float last paragraph left, as in this example using following CSS:
.post p {
overflow: hidden;
margin: 0 0 10px;
}
.post p:last-of-type {
float: left;
width: calc(100% - 105px);
}
but text does not wrap around and this may look good only if paragraph is short or if the logo is higher. Here is an example with square logo on the left.

Answer 10

Using this post as a reference, maybe this is what you're looking for:
#content {
position: relative;
}
.text {
float: left;
width: 400px;
text-align: justify;
}
.floatingBox {
width: 50px;
height: 50px;
background-color: blue;
}
#lfb {
float: right;
margin: 10px 0px 0px 10px;
}
And in the html:
<div id="content">
<div class="text">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. 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.<div id="lfb" class="floatingBox"></div>This is some text and so on and so 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. This is some text and so on and so forth. This is some text and so on and so forth.</div>
</div>

Answer 11

I've got a semi-solution, which works by moving the image down relative from the top of the last paragraph.
body {
width: 320px;
margin: 0 auto;
}
.offset-image {
float: left;
height: 80px;
width: 1px;
margin-left: -1px;
}
img {
display: block;
float: right;
clear: left;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi numquam, dignissimos odit expedita. Blanditiis repudiandae expedita quos reiciendis natus consequuntur deleniti harum quisquam quidem, dignissimos accusamus laudantium, facere ullam commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi numquam, dignissimos odit expedita. Blanditiis repudiandae expedita quos reiciendis natus consequuntur deleniti harum quisquam quidem, dignissimos accusamus laudantium, facere ullam commodi!</p>
<div class="offset-image"></div>
<img src="http://placehold.it/140x100">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi numquam, dignissimos odit expedita. Blanditiis repudiandae expedita quos reiciendis natus consequuntur deleniti harum quisquam quidem, dignissimos accusamus laudantium, facere ullam commodi!
</p>
We use an extra div.offset-image to push the image down. By styling it with float: left; width: 1px; and margin-left: -1px; to make sure the div itself isn't visible. On the image element, we provide a clear: left; so it's actually forced to move the height of the div.offset-image down.
The last paragraph item comes after the div.offset-image and the image element in the hmtl structure and will therefore naturally flow around these two floated elements.
You could improve this by adding a little bit of javascript into the mix. Set the height of the div.offset-image to the height of the last paragraph minus an x amount of pixels, to always render your image at the same distance from the bottom of the last paragraph.

Answer 12

Another fix can be to move the image before the paragraphs in the document flow, assign it float:right and a fixed dimension,
and you're done!!
.post {
width: 320px;
border: 1px solid magenta;
position: relative;
}
.likeimg {
width: 66px;
height: 66px;
background: yellow;
float:right;
display:inline-block;
margin:15px;
}
<div class="post">
<div class="likeimg"></div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>