Wrap Text Around An Image Without A Float?

[cyber0ne]

Is there a way to wrap text around an image without floating the image? Currently, I have a test page up with a re-design i've been working on for my website:http://www.cyber0ne.com/test/css/You'll notice on this page that each entry has an image in the top-left corner. I would like the text to wrap around the right side of the image, so there isn't all that extra whitespace. However, if I set the image to float: left then the images for the first couple entries end up further down the page, apparently pushed down by the boxes on the right of the page.Any ideas?-cyber0nehttp://www.cyber0ne.com

[Skemcin]

why not just add the align=left attribute in the image tag?then, just to be safe, make sure all your "Artic;e" div's end with a <br clear="all" />

[cyber0ne]

why not just add the align=left attribute in the image tag?then, just to be safe, make sure all your "Artic;e" div's end with a <br clear="all" />

<{POST_SNAPBACK}>

The images still get pushed down (at least in FireFox, I usually don't test in anything else until that one works). Also, I'd really prefer to keep all formatting out of the HTML file and in the CSS file.

[Skemcin]

The images still get pushed down (at least in FireFox, I usually don't test in anything else until that one works).  Also, I'd really prefer to keep all formatting out of the HTML file and in the CSS file.

If you use the align=left and you get the first line of code bumped down - that will be because that first line (like the rest) start with a <p> tag. I know there might be many people flaming this approach, but I NEVER use <p> tags - in the 11 years I've been coding, I've just gotten tired of the inconsistant interpretations each browser brings to the table. If you removed all the <p> tags and replaced the </p> tags with two <br /> tags, you might find that you will have better control and more consistant displays across browsers - but I understand you preference, this is just the way I've come to prefer coding it. So, I'm out of ideas if you want to be sure you keep it in the CSS, everything I quickly tried doesn't seem to like to ignore the "navigationlinkscontainer" class.Sorry.

[cyber0ne]

Here is a highly simplifies test version that seems to be showing the same behavior:http://www.cyber0ne.com/test/css/cyber0ne.htmlI noticed this morning, however, that it displays properly in IE. But Firefox, Opera, Mozilla, and Netscape all show the avatar images as being pushed down to the height of the last right-side div. This suggests to me that the reason (and hopefully a solution) is buried somewhere in the CSS specifications and IE is ignoring that part (for the better in this case, except that I refuse to host an IE-only site).I've been digging through spec sheets but haven't come up with anything yet. Anybody have any ideas?

[Skemcin]

here is a step closer:I just moved your <IMG> tage after the <P> tag and got it to wrap they way you want. This looks good in IE, but the first image is still thrown off in the other browsers. I tried a few more things and could only really get it to work by using absolute positioning - I might give it another try tomorrow if I can find some time.

[cyber0ne]

here is a step closer:I just moved your <IMG> tage after the <P> tag and got it to wrap they way you want. This looks good in IE, but the first image is still thrown off in the other browsers.  I tried a few more things and could only really get it to work by using absolute positioning - I might give it another try tomorrow if I can find some time.

<{POST_SNAPBACK}>

It's a step in the right direction visually, but seems to be a dead-end in the code from what I can figure out. Putting the <img> inside the first <p> in the article content and turning off the float at least gets one line of text to wrap, but that doesn't look very good either. I just wish HTML had a way of wrapping text around an image without floating the image.

[Skemcin]

if I remeber correctly from when I hacked with it last night, if you took the lfoat off and align="left" in the omage tag it worked. I know you mentioend previously that you wanted everythng is css - but this might be the one compromise to consider?

[cyber0ne]

if I remeber correctly from when I hacked with it last night, if you took the lfoat off and align="left" in the omage tag it worked.  I know you mentioend previously that you wanted everythng is css - but this might be the one compromise to consider?

<{POST_SNAPBACK}>

You sure? I just tried what you suggest but all non-IE browsers still push the images down the page. This is with the float: left removed from the CSS and with align="left" added to each image in the HTML. This happens both in the main version and the simplified version.