While reading http://doctype.com/float-only-one-image-div,

I wondered how one would float an image bottom right, but still maintain paragraph text flowing around the image (to its left and top)?

Flowing text around a top right floated image works fine here, only bottom right keeps resisting me.

Has anyone got an idea?

My own small test page can be accessed via Dropbox.

2 answers

1
point

Technically, what you are trying to do is impossible. You can not "float" an image to align with the bottom and right of a paragraph. It is possible to simulate this effect, however you'll find that it only works in the case of static (unchanging) text, and the results will be affected by differences in the ways that browsers render text.

You have two options:

  1. Insert the HTML for your image (float:right; with CSS) in the middle of your paragraph text. This will take some trial and error to find the right place within the paragraph. For example:

    <p>This is my paragraph, <img /> and it is a couple of sentences long.<p>

    Here is an example: http://www.tobiasstrollo.se/test/6/test5.html

  2. Use a helper image (probably a 1x1pixel transparent GIF), or an empty DIV, which is {float: right; clear: right;} before your actual image, which will 'push' the real image down to the correct place. You then adjust the height of the helper to push the real image down to the proper place.

    Although difficult to explain in text, imagine that the two images (or DIV and image) stack on top of each other, and both float right to the side of the parent container. Text flows around both. By increasing the height of the first, it pushes the second downward to your desired spot.

    Using this method, you can additionally use JavaScript to account for differing sized content: http://www.xs4all.nl/~jer03n/sandbox/float-bottom-right.html

Unfortunately, as I've said earlier, these solutions only work if the text does not change (in both size and content), and the results vary due to inconsistent browser rendering.

Answered almost 7 years ago by Justin Ryan
  • Justin, thanks for your reply and examples. You explained the approaches really well, no worries. The second solution looks half-way practical unless, as you noted, the paragraph text is increased in font-size. I quickly checked the web for ways to calculate font-size, it should be doable. Polyfragmentiert almost 7 years ago
danwellman 5600
0
points

This is a tricky problem - in order for the text to wrap around the image(s) correctly, the image(s) need to appear before the text in the markup, but if there is a single paragraph of text (such as in your example page) any floated images would appear at the top of the text. If you add 2 images to your test page (both before the p) and float them (one to the left, one to the right) the text will flow between them correctly.

To have one image top left, and another bottom right I guess you would have to break the paragraph into 2 (or more) p elements, with each floated image appearing above its respective p element.

See this advanced floats/wrapping tutorial for further info...

Answered almost 7 years ago by danwellman
  • Dan, I would like to just have one image floated bottom-right, not two images positioned diagonally as in the other question I referenced. As for your statement about floating images left and right resulting in text flowing between them, that is correct of course. This is currently a rather academic problem, but I am sure the requirement will crop up sooner or later. I did a short search on the web yesterday, but came up empty which strikes me as strange. Thanks for putting some thought into the matter, maybe this is the place to try and develop a solution if it is at all possible. Polyfragmentiert almost 7 years ago