How do you resize a floated image?

[pavsid]

Hi all,

I have a div container in which I want text on the left and an image on the right. I have set the width of the image to 65% in the html and this resizes beautifully with the browser.

However of course, the layout looks ugly because the image is pushed up against the text. What i really want is the image to stay to the right of the container and the text on the left to wrap around it.

So, i created another div inside the main div container and put the image inside it. I then floated this internal div to the right as you would. Except that now the image will not resize according to its container!

Is there another way around this?

[Centauri]

Rather than put a div around the image, why not give the floated image a left and bottom margin ?

[pavsid]

Hi Centauri, thanks for your suggestion, but i didn't think you could float the image on its own - you need a div around it to float?

I might be wrong, but can't get that to work anyway, unless i'm missing something

[Centauri]

No, styling can be applied to any element - you don't need to wrap them in something non-semantic to style them :<img src="image.jpg" alt="" style="float: right; margin: 0 0 10px 10px; width: 65%;">

[pavsid]

Ah ha, sorted it i think, instead of trying to float the image to the right, i've put a div around the text and floated that to the left instead. Now the image resizes with the browser and the text wraps nicely around it.

Only thing now is that damn IE is applying a margin around the image - how do i remove that?!!

[pavsid]

No, styling can be applied to any element - you don't need to wrap them in something non-semantic to style them :<img src="image.jpg" alt="" style="float: right; margin: 0 0 10px 10px;">

Oh right, i didn't know that, thanks a lot, will experiment with that as well then.

P.S. I like your portfolio!