Wrap Text Around Images - CSS - W3Schools Forum

Jump to content

• W3Schools.com
• Browse
  • Forums
  • Events
  • Guidelines
  • Staff
  • Online Users
  • Leaderboard
  • More
• Activity
  • All Activity
  • Search
  • More
• Leaderboard
• More
  • More

• Everywhere
• This Forum
• This Topic
• Status Updates
• Topics
• Events
• Members

• CSS

• All Activity

• Home
• HTML Forums
• CSS
• Wrap Text Around Images

Wrap Text Around Images

By bigsilk July 21, 2009 in CSS

Recommended Posts

bigsilk

Posted July 21, 2009

bigsilk

• 
• Members
• • 104

Posted July 21, 2009

I'm setting up a page where an image lies, and I want text to avoid it, like a newspaper column. Do I need to set up several CSS selectors to so that? Or is there a way to detect images and have the text flow around an image?page: HereAdam

Ingolme

Posted July 22, 2009

Ingolme

• 
• Moderator
• • 14.9k
• Interests:Software development, videogames
• Languages:C++, Java, PHP, SQL, Javascript, CSS, HTML

Posted July 22, 2009

You can use CSS float property on the <img> element and the text will flow on the left or right of the image. There's no way to have it flow on both sides of the image at the same time.

bigsilk

Posted July 22, 2009

bigsilk

• 
• Members
• • 104

• Author

Posted July 22, 2009

What about below? I want the text to flow to the left edge of the image, then flow to the left below the image.I've got this:

div.usable_text{position:relative;top: -11em;left:130px;float:left;}div.usable_pix {position:relative;width:100px;top:0px;float:right;text-align:left;padding: 10px;}

Where 'usable_pix' is for the image pushed right and 'usable_text' is for the white area to the left of the pix to be filled with text. Then, below the image, I want to allow the text to go 100% across without causing a visible break.If it's a lot, don't sweat it. But I figured there was a way to wrap text, like one does in MSWord.You've been a lot of help. I appreciate it. Hopefully, after I have picked your brains clean, I'll be able to help others as you have.Adam

Ingolme

Posted July 22, 2009

Ingolme

• 
• Moderator
• • 14.9k
• Interests:Software development, videogames
• Languages:C++, Java, PHP, SQL, Javascript, CSS, HTML

Posted July 22, 2009

What about below? I want the text to flow to the left edge of the image, then flow to the left below the image.Adam

It should do that as long as the image is floated. The text should go below automatically, unless you put it into a container with a margin or with a set width.Remove "width: 240px" to get the <div> to expand to the full width of the content area.

bigsilk

Posted July 22, 2009

bigsilk

• 
• Members
• • 104

• Author

Posted July 22, 2009

I have floats in the selector attributes. But when I have both at the same relative position in distance from the top, the text covers the image:Click hereIf you would, please grab the code from the page. I could post it from here, but it's six of one and half a dozen of the other.Adam

Ingolme

Posted July 22, 2009

Ingolme

• 
• Moderator
• • 14.9k
• Interests:Software development, videogames
• Languages:C++, Java, PHP, SQL, Javascript, CSS, HTML

Posted July 22, 2009

The relative positioning is going to cause a lot of trouble.I don't recommend using the position attribute at all. Most of the professional uses for it involve Javascript.

SillyBilly

Posted July 22, 2009

SillyBilly

• 
• Members
• • 109

Posted July 22, 2009

I'm setting up a page where an image lies, and I want text to avoid it, like a newspaper column. Do I need to set up several CSS selectors to so that? Or is there a way to detect images and have the text flow around an image?page: HereAdam

For a very interesting way to wrap text around an image that does not have straight line borders, look at this link.Wraping Text

bigsilk

Posted July 22, 2009

bigsilk

• 
• Members
• • 104

• Author

Posted July 22, 2009

Really? This, to me, should be a pretty easy fix. I mean, I'm not trying animations created by complex algorithms, and that's done already!I've been trying to avoid tables, but wouldn't they do this easily?It occurs to me, especially in an environment where CSS can create print-ready documents, that this is a situation that appears commonly.MSWord does it.Please don't get me wrong: It's the system, not you. It just occurs to me that this should be something to be done with an attribute in a selector.Adam

glopal

Posted July 22, 2009

glopal

• 
• Members
• • 49

Posted July 22, 2009

Lets say you want the image on the right, and the text wrapping around it to the left.Put the image in a div, and in the CSS, set that div to float:right;Then for the HTML, you put the image first, then the text. So everything after the image will be put on the left side.That's it. Just make sure NOT to apply a float to the text, that won't work.Then after you get it working you can give the image div a margin if you want a bigger buffer.Hope that helps

Ingolme

Posted July 22, 2009

Ingolme

• 
• Moderator
• • 14.9k
• Interests:Software development, videogames
• Languages:C++, Java, PHP, SQL, Javascript, CSS, HTML

Posted July 22, 2009

Lets say you want the image on the right, and the text wrapping around it to the left.Put the image in a div, and in the CSS, set that div to float:right;Then for the HTML, you put the image first, then the text. So everything after the image will be put on the left side.That's it. Just make sure NOT to apply a float to the text, that won't work.Then after you get it working you can give the image div a margin if you want a bigger buffer.Hope that helps

No need to put the image in a <div>. That's just unnecessary mark-up. Assign the float:right straight to the image itself.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

• All Activity

• Home
• HTML Forums
• CSS
• Wrap Text Around Images

×

• Existing user? Sign In
• Sign Up

• W3Schools.com

• Browse

  • Back
  • Forums
  • Events
  • Guidelines
  • Staff
  • Online Users
  • Leaderboard

• Activity

  • Back
  • All Activity
  • Search
• Leaderboard

×

• Create New...