Moving image with position:relative without leaving a hole

[ntbgl]

I have the following code:

<div>
<div style="float:left;position:relative;top:70px"><img src="image.jpg" width="400" height="263" /></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in lacus in nibh ornare vulputate. Pellentesque rhoncus. Suspendisse nibh. Cras felis. Curabitur volutpat pellentesque lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

I'm moving the image down from where it normally would be, which is what I wanted, but I leave behind this big empty space where I want the text to flow.

Is this possible?

[swa66]

position: relative is intended to leave the "hole" where the element was originally rendered, and only shift the position without affecting the other elements.

BTW: you don't need the div, you can style the image itself just as well.

Now if you give the outer div "position" and use appropriate padding you can use absolute positioning on the image and set it inside the outer div where you like it (but take care: if the padding and/or margins don't keep text away from it, it'll overlap with it (only floats will push away the inline content)

[ntbgl]

Thanks for the reply.

I think I'll try using another approach.

If I use this:

<div id="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in lacus in nibh ornare vulputate. Pellentesque rhoncus. Suspendisse nibh. Cras felis. Curabitur volutpat pellentesque lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Then I can set #box1{url(file.jpg) no-repeat bottom left}

Is there anyway to position some type of clear div in box1 so text dosn't flow over the image?