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?
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.