Positioning small image on left of text?

If i do:

<img src="" style="float:left"> SOME TEXT BLA BLA BLA BLA

It doesn't work because text goes down to the image when the image height stops. I mean:

it would do this:

http://img8.imageshack.us/img8/9379/senzatitolo1yt.jpg

While what i want to get is:

http://img28.imageshack.us/img28/606/senzatitolo2rd.jpg

I could use old good tab开发者_运维知识库le (<td>img</td><td>text</td>) but in 2011 that doesnt' seem the way to go :)

Any easy cross-browser trick to do that?

Edit: I can't know the image-width

Thanks!

Use two div tags, float them both to left. Give a width of 30% to one of them and 70% to the other. Put the image in the first one, text in the second one.

Given the simplistic html:

<img src="path/to/img.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui odio, luctus ut viverra vitae, dignissim a mauris. Vestibulum vel massa at sapien tincidunt venenatis id sed purus. Ut quam libero, mollis a ullamcorper sed, gravida id ligula. Sed nec augue enim. Phasellus accumsan aliquet erat interdum ullamcorper. Cras tellus libero, tincidunt non placerat interdum, venenatis id arcu. Nulla facilisi. Maecenas malesuada vestibulum venenatis. Nam vel tellus arcu. Sed non dui urna. Proin fermentum aliquet lectus non fermentum. Donec aliquet purus et tortor lobortis gravida. Duis vehicula ligula nec enim consequat ut tempor diam molestie. Aenean egestas eros sem. Phasellus ullamcorper pretium nunc molestie luctus. Mauris semper ultricies nulla, at tempus purus eleifend vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ac est nunc.</p>

The following CSS works:

p {
    margin-left: 100px; /* width of image plus some padding for white-space */
}

img {
    float: left;
    width: 90px;
    height: 90px;
}

JS Fiddle demo.

Surprisingly enough the following works, albeit only tested on Chromium 8/Ubuntu 10.10:

img {
    width: 100px;
    height: 100px;
    background-color: #f90;
    float: left;
    margin: 0 10px 100% 0;
}

JS Fiddle demo (ignore the colours, they were just so's I could see where things were sitting).

Second (post-edit) JS Fiddle demo, featuring an img with non-specified dimensions.

There are multiple ways to realize that.

1) two divs. assign to both a width. float the image-div to the left, the text-div to the right.

2) use margins!

give it a shot and give me feedback.