Jump to content
Sign in to follow this  
cyber0ne

Wrap Text Around An Image Without A Float?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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" />

Share this post


Link to post
Share on other sites
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" />

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.

Share this post


Link to post
Share on other sites
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.:)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

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.

Share this post


Link to post
Share on other sites

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? :)

Share this post


Link to post
Share on other sites
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? :)

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...