Float image on the left on the left with the right text wrapped from the upper left to down left of the image

Question

I'm trying to create a float that gets on the left with the right text wrapped from the upper left to down left of the image floated.

The result that I'm looking for is like this:

some text some text some text 
some text some text some text 
some text some text some text 
          some text some text 
Image     some text some text 
          some text some text 
some text some text some text 
some text some text some text 
some text some text some text

But what I'm actually getting is:

          some text some text 
          some text some text 
          some text some text 
          some text some text 
Image     some text some text 
          some text some text 
some text some text some text 
some text some text some text 
some text some text some text

As you can see, There is a space above the image, it doesn't matter if I use margin or padding.

So how can I achieve the result that I need? I'm currently using CSS. Can jQuery do the job?

https://jsfiddle.net/pta0g6r5/2/

<style>

.floatimage {           
  float: left;
  padding-right: 10px;
  margin-top: 150px;
}

</style>

<p class="floatimage">  <img src="http://i01.i.aliimg.com/wsphoto/v0/927196633_1/Mulheres-Retro-Rivet-no-colarinho-branco-Feminina-Silm-manga-comprida-Pockets-OL-blusa-cs82.jpg_50x50.jpg" /></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum, metus semper malesuada ultricies, risus arcu convallis quam, ut pulvinar orci augue et sem. Sed a orci cursus, fringilla tortor eu, eleifend massa. Aenean elementum augue non sodales hendrerit. Fusce ut nunc luctus, bibendum ex sed, sodales elit. Fusce dictum, nunc egestas bibendum dictum, lorem nisl aliquam purus, non ullamcorper magna dui ut justo. Curabitur at porta sem. Donec vestibulum nec justo ut tempor.

Aenean in neque sagittis, auctor est vel, congue purus. Pellentesque porttitor dui id ligula facilisis sollicitudin. Sed finibus maximus convallis. Nullam eget rutrum diam, at tempus elit. Pellentesque tempor eleifend tortor interdum fringilla. Donec mollis in nisl sed dignissim. Nunc eu magna eu risus laoreet dapibus sit amet nec metus. Maecenas a nisl et lacus sollicitudin maximus at nec ex. Morbi porttitor urna eget ipsum malesuada, a posuere quam faucibus. Morbi quis felis quam. Fusce vulputate ornare sapien, quis aliquam risus commodo at. In pharetra imperdiet turpis a sodales. Praesent congue, erat vitae ullamcorper malesuada, tortor mi ultrices leo, malesuada elementum tortor libero sit amet eros. Vivamus nec massa hendrerit, porttitor lorem et, mollis libero. Donec eget rutrum nibh. Morbi in ligula sit amet ligula imperdiet blandit non sit amet arcu.

Quisque pharetra lacinia libero, non pulvinar elit sodales nec. Nullam feugiat orci et ante vulputate dapibus. Suspendisse porta justo in mi sollicitudin, in cursus odio vestibulum. Phasellus vitae euismod diam, id placerat ipsum. Ut porta, magna ac cursus ullamcorper, justo erat tristique dui, tincidunt iaculis augue justo quis ex. Sed et egestas lacus. Maecenas leo quam, auctor ut erat ac, bibendum dignissim nisl. Nullam consequat blandit semper. Aliquam erat volutpat. Pellentesque laoreet aliquam mauris vel volutpat. Nulla tristique pellentesque faucibus. In posuere neque a justo tempus dignissim. Praesent pellentesque augue consequat, commodo nunc aliquet, porttitor neque.

Nulla posuere volutpat varius. Duis ultricies libero et urna aliquam tincidunt. Nam et egestas lectus. Nunc et aliquet tortor. Integer tincidunt fringilla congue. Ut quis mauris ipsum. Sed vel ante justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.

margin top 150 and you expect text to wrap into that margin? Not gonna work I'm afraid. — Roko C. Buljan, Nov 11 '15 at 22:38
I know, butt.... isn't padding that is supposed to leave a space between the parent and the child element? — Matheus Lopes, Nov 11 '15 at 22:41
Padding is the *inner space*, margin is the *outer space*, but space is space. Also... hmm use jQuery? Why? What if one day you'll have not that much text? than margin 150 will not fit... Also, what about other media devices? 150 will than be.. what value exactly? I suggest you to think thoughtfully about what you really want to achieve with that... and how the best solution will reflect in all other use-cases... :\ — Roko C. Buljan, Nov 11 '15 at 22:42
http://codepen.io/dudleystorey/pen/FvJDB ... might help? I know but what if you'll have say 2 lines of text? Your image will end up *floating* out article of context... ?! — Roko C. Buljan, Nov 11 '15 at 22:47
https://jsfiddle.net/pta0g6r5/6/ << why not do it the *usual* way? What's wrong with it? ... Or you want that on window resize, your image to always be 150px from the top? — Roko C. Buljan, Nov 11 '15 at 22:49
The image must be away from the top, like your last example, but I can't insert the image in the text manually like you did. — Matheus Lopes, Nov 11 '15 at 22:57
You might consider to put the image further down in the text and remove the margin. https://jsfiddle.net/pta0g6r5/8/ — Martin van Driel, Nov 11 '15 at 23:06
@RokoC.Buljan Do me a favor, post that other post answer as a reply, I'll mark it as the best answer. — Matheus Lopes, Nov 11 '15 at 23:58
@RokoC.Buljan Why did you replied as a possible duplicate? It is different from that other question. I just asked you to post the other reply as an answer, as you're the one that that came with the solution. — Matheus Lopes, Nov 12 '15 at 00:03
I cannot now vote any more to close. It was the right thing to do since that answer is exactly here: http://stackoverflow.com/questions/1915831/text-wrapping-around-an-absolute-positioned-div - not the accepted one but it's there and it's the one with most upvotes. — Roko C. Buljan, Nov 12 '15 at 00:06
@MatheusLopes cannot any more since I voted back-open and I'm not allowed to close any more :( — Roko C. Buljan, Nov 12 '15 at 00:07
@MatheusLopes please delete the question. That's the best you can do I think. — Roko C. Buljan, Nov 12 '15 at 00:08
I can't, because I'll lose points, but I will open a new question, and give you the link. — Matheus Lopes, Nov 12 '15 at 00:09
@RokoC.Buljan http://stackoverflow.com/questions/33662263/what-is-a-web-designer-nowadays — Matheus Lopes, Nov 12 '15 at 00:13

Float image on the left on the left with the right text wrapped from the upper left to down left of the image

0 Answers0