Question

I have an image that is floated Left Next to the image there is text wrapped around the image.

I want to put the first line of text next to the image and the consecutive lines of text to go over the image. Is that possible?

Check out these images to see what I’m trying to achieve:

The red square is the image.

<img class="someImage" ... />
<span class="someText" ... />

.someImage { float:left; }
.someText { line-height:1.5em; margin-top:10px; padding:0 22px; }

The image has a height. I want to wrap the lines of text (after the first line of the paragraph) on top of the image. I only want the first line to wrap around the image.

Answer 1

You can use a workaround with text-indent and a background image. Demo.

HTML

<div id="text">
Lorem ipsum dolor sit amet...
</div>​

CSS

#text {
    background:url(your-image.jpg) top left no-repeat;
    text-indent:100px;
    padding-left:20px;
}