SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Oct 1999
    Location
    New York, NY
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image float and <p> issue in IE

    Hi CSS Experts,

    I'm using a typical layout to float an image left and wrap text around it.

    Code:
    <p><img src="me.jpg" alt="me" style="float:left;">Lorem paragraph one...</p>
    <p>Here's paragraph two...</p>
    <p>And paragraph three...</p>
    In Firefox, everything looks OK, but in IE7, if the first paragraph is not as 'tall' as the height of the image it is wrapping around, the next paragraph drops to directly under the image it is supposed to floating around.

    My workaround has been to code the paragraphs with <br /><br /> instead of the <p> but that can't be right!

    Do I need to wrap an additional div, or something around the whole thing? I have several of these images on the page, as it's a BIO page for the company.

    What am I missing?

    Thanks.

    -Josh

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,723
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, not quite sure if I understand but you would need to clear the next <p> (paragraph 2?) element to make sure it's not coming onto the floats .

    clear:left; (or both, whatever )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru
    Join Date
    Oct 1999
    Location
    New York, NY
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan,

    I'll be a bit more clear... I don't want the next paragraph to clear left but in IE it is. Does that make sense?

    I want each paragraph to continue to wrap around the image. If this doesn't make sense, I'll take a screenshot!

    Thanks.

  4. #4
    SitePoint Guru
    Join Date
    Oct 1999
    Location
    New York, NY
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here's a screenshot of the issue. This is taken from IE7... I want paragraph 2 to still wrap around the photo, but as you can see, it drops to below the photo...

    Thanks.
    Attached Images Attached Images

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,723
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well you will need to renest then . Have it like this
    <img>
    <p>all the text</p>

    FLoat the image and don't float the <p>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Guru
    Join Date
    Oct 1999
    Location
    New York, NY
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect.

    Thanks for your help, Ryan.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,723
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •