Float image with nothing underneath

[mboehler3]

Hi, I have a quick ? that I've never been able to figure out regarding floating images and CSS. I have multiple paragraphs of text on a page, and I would like to have an image float to the left. However, I would like the text to not flow underneath the image, instead looking much like two columns in a table. How can I create this effect in CSS without using a <table>? Here's an image of what my page looks like now:Now I'd like to have white space underneath the image, and have the text only appear to the right. Maybe I shouldn't even use the float property. Any suggestions?Thanks in advance!

[thescientist]

if you float the image left, and give the div a left-padding equal to the width of the image, you shouldn't have any problems.

[mboehler3]

if you float the image left, and give the div a left-padding equal to the width of the image, you shouldn't have any problems.

I've tried adding this div tag around the image:

<div style="float:left;padding-left:359px;">

And it adds 359 pixels of white space to the left of my image, with text still floating underneath.I would guess that I could add padding-bottom:500px or some large number to add white space underneath the image, but I'd rather not do this since I'd have to change the number each time I add more text.

[thescientist]

no, the left padding goes on the div with the text. the idea is that the left padding pushes the text past the width of the floated image. For good measure try giving this text div a width.

[mboehler3]

no, the left padding goes on the div with the text. the idea is that the left padding pushes the text past the width of the floated image. For good measure try giving this text div a width.

Excellent. I knew it was easy. Thank you!

[ShadowMage]

You could instead add overflow: auto to the div. That way you don't have to know the width of the floated element.