dcsimg
www.webdeveloper.com
Results 1 to 15 of 15

Thread: text wrapping

  1. #1
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898

    text wrapping

    Could someone tell me why in FireFox, the text next to the 2 pictures at the bottom doesn't wrap around the images, but in IE it does?

    http://74.220.207.192/~zluthorg/ministries/education/preschool.php

    thanks

  2. #2
    Join Date
    Nov 2007
    Location
    Williamsburg, VA
    Posts
    55
    Have you tried it without wrapping the images in heading tags?

    The first image is wrapped in a h3 tag and the second in an h2 tag.

  3. #3
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    I updated the second image (of the teacher), but that moved everything below the picture now.

  4. #4
    Join Date
    Nov 2007
    Location
    Williamsburg, VA
    Posts
    55
    now you have p tags around the teacher image. Are you using a cms or wysiwig editor that might have put the p tags in there.

    I would think you will either have to remove the p tags or style them float:right.

  5. #5
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    yes, I am uing a CMS, so the <p> tag get's inserted. I have the image as float:right though. Do the <p> tags need the float:right instead?

  6. #6
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    I styled the <p> tagls to float right, but that didn't help anything

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by jrthor2
    I styled the <p> tagls to float right, but that didn't help anything
    Float the image, not the "<p>"
    <p>text text text text<img src="#" style="float:right;" /> text text text text text text text text text text text text text text text text text text text text</p>

  8. #8
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    that's how I originally had it, but is still doesn't display right (in FireFox). I put it back that way so you can see.

  9. #9
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    any other ideas? I can't seem to get it to look the same in FireFox as it does in IE.

    Thanks

  10. #10
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    The images has to be "in" the "<p>" in order for the text to 'wrap around' the float. See attached screenshot image: you have an empty "<p>" with a "floated image". This is correct behaviour.

    You also have to provide enough text to actually have something to 'wrap around' the floated image. One sentence isn't enough, and once you close the "</p>", the NEXT "<p>", being "block-level element", forces a new-line.
    Attached Images Attached Images

  11. #11
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    Ok, I put it inside the <p> tag, but then how do I get multiple paragraphs to wrap around the image?

  12. #12
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I believe you need to float the paragraphs around a floating image outside the paragraphs.

  13. #13
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    I think I have what you suggested, but now the text falls below the images.

  14. #14
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I think what you're trying to do is called a "pull out". Some of this may be helpful.

  15. #15
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Oh yeah, -that works! -Rather like "pullquotes" as used by magazine layouts, except instead of super-large-text-in-a-padded-div with wrap-around text paragraphs, it's an image and paragraphs wrap around it... Sharp!

    I was to infer that several instances of :

    "<p>text text text<img src="#" style="float:right;" /></p>
    <p>text text text</p>
    <p>text text text</p>
    ...(etc.)
    <p>text text text</p>"

    would work better if:

    <p>text text text<img src="#" style="float:right;" /><br />
    text text text<br />
    text text text<br />
    text text text...(etc.)</p>

    -the latter being a bit code-ugly, but provides enough textual content in one conriguous "<p>" to actually 'wrap' around a floated image of superior height..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles