SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 80
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question wrapping text around image

    Ok this is a basic question I think. What is the best/standard way to wrap text around an image? I've tried doing it like this:
    Code HTML4Strict:
    <div style="float:left"><img src="someimage" /></div>
    <p>My paragraphs of copy go here</p> etc..

    This works in non IE browsers. In IE my paragraphs do not wrap around the floated div. The other option I've tied is to include the image inside the paragraph like this

    Code HTML4Strict:
    <p><img src="someimage" style="float:left" /> My paragraph text goes here etc... </p>

    The problem with this method is that it only wraps the text inside the first paragraph. So if the first paragraph is short, there is a huge break between the first and second paragraphs. Any help??

  2. #2
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just put the IMG outside the P.
    HTML Code:
    <img src="someimage" height="200" width="200" style="float:left" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly. There's no need for the image to be in the paragraph element because it's not part of the paragraph (a group of related sentences, questions and statements - in other words, TEXT).

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't seem to work in Internet Explorer. The text in the paragraph doesn't wrap around the image...

  5. #5
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works perfect in IE, both 6 and 7
    Can you post your URL so we can see if anything else affects the situation.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by warpdesign View Post
    The problem with this method is that it only wraps the text inside the first paragraph. So if the first paragraph is short, there is a huge break between the first and second paragraphs.
    Then you must have clear:left or clear:both set for the next paragraph. The second method is how you should do it (except that there should be a text equivalent in an alt attribute and the CSS should reside in an external style sheet).

    Quote Originally Posted by junjun View Post
    Just put the IMG outside the P.
    No!
    That will be invalid HTML with a Strict DTD (which is what you should use for new pages) if the paragraphs are immediate children of BODY.

    It's also semantically weird to have an inline-level image and block-level paragraphs on the same structural level.
    Birnam wood is come to Dunsinane

  7. #7
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    That will be invalid HTML with a Strict DTD (which is what you should use for new pages) if the paragraphs are immediate children of BODY.
    I don't think that 'if' is very likely.. I've strictly used strict DTD's for years and it's been awhile since I've seen a site without some kind of wrapper. Once warpdesign comes along with a URL, I'll bet you this is the case here as well.
    Quote Originally Posted by AutisticCuckoo View Post
    It's also semantically weird to have an inline-level image and block-level paragraphs on the same structural level.
    Don't see how that would change the semantical meaning at all, but I also know how far you've taken your theoretical knowledge in some of these topics.
    I put images on the same 'level' as block elements all the time. But turning all images into block elements is also a part of my CSS framework.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun View Post
    I don't think that 'if' is very likely.. I've strictly used strict DTD's for years and it's been awhile since I've seen a site without some kind of wrapper. Once warpdesign comes along with a URL, I'll bet you this is the case here as well.
    It's still something you need to be aware of. What if the 'wrapper' is a blockquote element or a form element?

    Quote Originally Posted by junjun View Post
    Don't see how that would change the semantical meaning at all, but I also know how far you've taken your theoretical knowledge in some of these topics.
    Go ahead and make fun of me if you like. I've got thick skin. The fact remains: the very purpose of HTML is to mark up semantics and document structure. Even though a vast majority of sites (and the HTML5 Working Group) dismiss this as dinosaur thinking.

    It doesn't change the semantical meaning, but it doesn't make semantical sense to have block-level and inline elements at the same structural level. You're mixing apples and orange-juice bottles.

    Quote Originally Posted by junjun View Post
    I put images on the same 'level' as block elements all the time. But turning all images into block elements is also a part of my CSS framework.
    Ye gods!
    There is a world of difference between rendering and semantics. You are not turning images into block elements; you are making inline images generate block boxes. That's very different! CSS cannot change the grammar rules of the markup language. Setting
    Code:
    div {display:inline}
    doesn't make it valid to nest a DIV inside a link or a heading. And setting
    Code:
    img {display:block}
    doesn't make images block-level elements.
    Birnam wood is come to Dunsinane

  9. #9
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Go ahead and make fun of me if you like. I've got thick skin.
    Uhm. It was meant as a compliment, Tommy. But it's fine, slap my face with semantics, I've got thick skin as well.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that's a lot of discussion for such a simple question!

    As far as a link, our development server is behind a firewall so I can't easily give you a link to the page. I *think the problem is that my paragraphs have a width set in CSS and that Internet Explorer will not allow the text in the paragraph to wrap because it wants to keep the width in addition to the images width.

    I've made the following example that illustrates my point:
    http://superhyperglobalmeganet.com/test2.html

    That works fine in FF and Safari, doesn't work in IE6 or 7. Example 1 in IE doesn't wrap at all, example 2 only wraps the first paragraph...

  11. #11
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by warpdesign View Post
    Wow, that's a lot of discussion for such a simple question!
    Yeah, no sh*t.
    Quote Originally Posted by warpdesign View Post
    Can't load that domain . Feel free to provide the whole code (HTML and CSS) as well and I'll see if I can sort it out for you.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The problem with your demo is that you have given a width to the p tag of 900px. When you give a width to an element in IE you set "haslayout" to be true and the case of elements alongside floats "haslayout" has the same effect that applying "overflow" would for other browsers.

    The effect of "haslayout" (and overflow other than visible) on static content next to a float is that the element then forms a rectangular block almost like another float (but not quite) and steers well clear of the original float. If the element has a dimension that will not fit alongside the float then it moves below the float. Margins on the element now apply from the floated element and do not slide under the float as before. Also backgrounds and borders do not slide under the float but are contained within the element that has "haslayout" (or overflow other than visible).

    Therefore you cannot make a 900px wide paragraph wrap around a floated image that is itself outside of the paragraph because there simply won't be enough room.

    Remove the width from the paragraph and the text will wrap as expected. If you need to confine everything to a certain width then wrap the whole lot in a div that has a width of 900px and not each individual paragraph.

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I had a feeling it was the width but I didn't want to change it since it affects my entire website and if there was another fix I wanted to try that first. Thanks everyone for your help!
    (changing width to "auto" and adding padding-right to compensate for not setting the width fixed the problem)

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun View Post
    Uhm. It was meant as a compliment, Tommy.
    Oh. Sorry! I read it the wrong way then.
    Birnam wood is come to Dunsinane

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I still don't see what the big deal was. Text is inline. Images are inline. They are usually both content sitting in the same space with an imitation of common newspaper articles. Why wrap blocks around images? To make more code? We only wrap text in blocks cause it's our only semantic choice. It's not considered good to wrap text in spans for example instead of <p>'s.

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In a parking lot, you park cars. You don't put an engine in one slot, a driver's seat in another and a steering-wheel in a third, in amongst the cars. Those things belong inside the cars, not separately in the parking slots.

    You don't park one car inside another, either.

    Similarly, a given HTML element should contain either block-level children or inline-level children, not a mix of both. Although you can do so and still have valid HTML, doesn't mean that you should.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    But then what would you put the img in? Not p's, an image isn't a paragraph! Do you put yours in divs? Or do you do
    <div>
    text text text text
    <img...>
    </div>

    ??

    I thought the reason "float" was invented was specifically so text could flow around an image?? Not around other blocks (though now it can be used for that too).

    If img's by default came in divs like engines come in cars it would be a lot easier to understand.

  18. #18
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    But then what would you put the img in? Not p's, an image isn't a paragraph!
    The image itself isn't a paragraph, but its text equivalent might be. If so, wrapping it in <p> is appropriate.
    Code HTML4Strict:
    <p><img src="dialog.png" alt="Select the menu option you want and click the OK button."></p>

    If it's a decorative image (null alt text) it's usually easiest to include it in the adjacent paragraph, as in warpdesign's second code sample in the first post of this thread.
    Code HTML4Strict:
    <p><img src="flower.jpg" alt=""> Lorem ipsum dolor sit amet ...</p>

    Remember that it isn't the image that counts, but the information that it conveys.
    Birnam wood is come to Dunsinane

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hmmm... interesting. I'm not sure I could ever make myself stick an image in a <p> though.

    I look at pages as if it's Chinese. I don't look at what the text or the images "say" cause if it's Chinese where I don't understand it shouldn't matter anyway (can I put markup tags on a Chinese newspaper? You bet!). Image is an (inline) box of something I can't see and text is some inline thing I can't read. So other than the fact that I put the inline thing I can't read inside a block element because everyone tells me to, I actually see them as the same (both inline).

    I also figure if I'm floating the box I can't see next to text I can't read, and don't know if the one has anything to do with the other anyway, I'd rather have them uncoupled so that something can stay floated right or left and various other things that I can't read can come and go alongside it as time passes. Kindof like a floating sidebar might have lots or no text next to it; it's by itself and floating there so whatever comes along can wrap around it and the two can otherwise ignore each other. But if my sidebar was a big box-I-can't-see and I had it tethered to the text-I-can't-read, then changing one while keeping the other just got harder.

    (In fact while building site templates I use differently sized grey boxes to represent the images... the boss tells me later what images he wants.)

    Still, while I haven't seen it, it's an interesting idea that I'll probably keep for some future web page.

  20. #20
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    The image itself isn't a paragraph, but its text equivalent might be. If so, wrapping it in <p> is appropriate.
    This sounds like a long shot, just because an image might have a text equivalent, does not make it a paragraph. It's an image and there might be many reasons why I would like to have images and paragraphs seperated. How can we make applications that's supposed to make sense of paragraphs if we're not strict about what we mark as paragraphs (I read your excellent blog article on this subject a couple of days ago).

    Here's a typical markup I use:
    HTML Code:
    <div>
    <img>
    <p>Text..</p>
    </div>

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I'm not sure I could ever make myself stick an image in a <p> though.
    I should point out that IE has lots of bugs where inline elements are left hanging in mid air like this. You will get white space bugs where it takes into account space that follows inline elements and before the next block tag starts plus other layout problems as well depending on the situation.

    If you don't enclose the image tag then you are basically saying something like this.
    Code:
    <div>I am some anonymous text
        <p>But I am nicely contained</p>
        <p>I am nicely contained</p>
    </div>
    So following your lead we could leave the first paragraph tags off everything we write as above and save on 2 p tags . It will still validate however its pretty ugly I'm sure you will agree.

    If you make the page well structured then the IE bugs I mentioned are avoided. It's just a matter of common sense and good coding practice.

    As Tommy said images in the html are content so they should be in a p tag. If they are only presentation then they should be in the background.

    It also makes the page easier to read when its formatted if every element has a logical start and finish and hat matters a lot when you are working through code day in and day out.

  22. #22
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Code:
    <div>I am some anonymous text
        <p>But I am nicely contained</p>
        <p>I am nicely contained</p>
    </div>
    This actually illustrates it pretty good.. I see the dilemma.

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    If that's the dilemma then I'd still want something else around the image-- something that doesn't mean anything, like <div>. <p> means paragraph but <div> just means "anonymous box."

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    <div> just means "anonymous box."
    No a div doesn't mean that all all.

    A div is a logical divider of content. It applies structure and divisions to a page. It isn't really meant for content such as an image when there are better more semantic elements available.

    An image is content (just like text) and the best tag for it is a p tag (and its 2 characters smaller than a div anyway )

    When you place an image on the page you are saying something. When you say something you write it in paragraphs. It's the same as far as I am concerned.

    First of all you were saying it was alright not to place it in a container at all and now your debating the finer points of semantics in which element to place it

    Just enclose it in p tags and be done with it

  25. #25
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, an image isn't always text though. Sometimes it's actually an image (like an image of my cat, or the raccoon I once had as a pet). Also, as far as IE's bugs are concerned, just setting the display of all the images in a Web page to block avoids the bugs as well (just like setting the border to 0 knocks out an old Gecko bug). Just because an image has the alt attribute doesn't automatically mean it's text. It's just a text equivilent that tells the user agent what the image is.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •