1

Here's a general outline of what I'm trying to do:

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT /============\
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |            |
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |   IMAGE    |
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |            |
                                             |            |
                                             \============/

Basically, I want the image to have float: right;. BUT, I don't know exactly where in the text the image should go for it to come out as above.

I need something like float: right; margin-top: -100px;, to move the image up, but the text floats around the original position of the element, not the new one. Similar things happen if I use position: relative; top: -100px;.

Does anyone know of a way of achieving this effect in CSS only?

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • almost a duplicate of [CSS: wrap text around a bottom-right div?](http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div), except the fact that your image sticks out a bit from the bottom is probably significant. – Cheran Shunmugavel Feb 18 '12 at 06:52
  • can you elaborate on this -- `but the text floats around the original position of the element, not the new one` .. does the text go behind the image which you moved up with `margin-top:-100px` ?? – Vivek Chandra Feb 18 '12 at 09:58

1 Answers1

2

There's no way to do this purely in CSS today. The best you can hope for is some very minimal Javascript.

http://jsfiddle.net/chad/T7SAg/5/

This was based on Joseph's fiddle, using the technique mentioned the SO Answer that Cheran linked to. Basically it involves two floats, a "vertical pusher" float, and a float for the image you want to be at the bottom. You use javascript to set the height of the pusher float, and with the image float set to clear:right, it will go down to the bottom reliably.

Chad von Nau
  • 4,316
  • 1
  • 23
  • 34
  • All right, it's a shame it can't be done, but I'll go ahead and Accept this as the best answer because of the JS solution, should I ever try to do something like this as part of site design. – Niet the Dark Absol Feb 18 '12 at 18:20