Insert image into text and keep the text wrapping with CSS

Question

Hi all, I've just encountered a problem that my current (almost equal to 0) CSS knowledge cannot deal with. Here's the thing:

I have some text inside of a div element; this div element (let's call it a container) has a fixed width and dynamic height (no constraints). I'd like to put some text inside of the container; after the second word of the text, I'd like to put an image so that the whole things looks more or less like that:

+---------------------+
| I was [x] on my way |
| to the city in the  |
| sun                 |
+---------------------+

where [x] is the image. It's important for the second part of the text to wrap so that everything looks like in the above example.

The text in the container may vary; nevertheless I always know which part of the text goes before and which part of the text goes after the image.

How do I do that with CSS?

Answer 1

If you put the <img> tag in the middle of your text, things should behave like that by default, unless you override the image's display property. You may also want to experiment with the image's vertical-align property to make it line up nicely with the surrounding text.