Positioned, floated image

An image can be floated and, in effect, absolutely positioned by wrapping it in an absolutely positioned container.

The image on this page should be (in effect) absolutely positioned in the left-hand margin. It’s floated, so the text should wrap around it.

html

<div id="test1">
    <img src="/escribano.jpg">
    Some sample text to wrap around the image
</div>

css

#test1 { position: absolute; left: 10px; top: 400px;
    width: 200px; }
#test1 img { width: 6.25em; float: left; }

Some sample text to wrap around the image

This article was written in response to a mailing list question titled Positioning images and wrapping text...

Comments