SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is this floated image disrupting the text flow?

    Maybe I'm just tired, but can anyone tell me why this image is screwing up the text flow? bit.ly/1eFppp8 I'm referring to the thumbnail image under "The Latest From Our Blog" at the lower left. This isn't behaving like a normal float, but disrupting the paragraph. Any ideas?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    What do you mean ? the tex wraps around a floated element ( as it's doing on your link). If you want the text not to be side by side with the image you need to give the image display:block; ( no float) . hope that helps

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    As Dresden said the float is behaving as it should so you may need to explain what you are seeing and what you think is wrong with it. Or if this is a specific browsers (and version) bug then let us know which browser and which version

  4. #4
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    As Dresden said the float is behaving as it should so you may need to explain what you are seeing and what you think is wrong with it. Or if this is a specific browsers (and version) bug then let us know which browser and which version
    I've tried it in current FF and Chrome. Here's the problem: Look at the phrase "basis for Remember," which splits on a line near the bottom of the image. See the extra line spacing below "basis"? It looks like the margin-bottom of the image is pushing down a block of text in the same paragraph. Normally I would expect the paragraph to maintain its line-height integrity, leaving the extra space below the image and not between the lines of text. Also, why does the word "for" wrap to the next line? It is surely short enough to appear on the same line with "basis."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The word for wraps because you have the word "remember" in an em element with no space and so wraps as a whole with the word before it as though it said "forbefore" as browsers can remove white space before an element starts. Place the space inside the em and it will stay on the same line.

    Code:
    <em> Remember, </em>
    If you make that above change it will become clear why there was more whitespace than you thought because the words "for" and "remember" would no longer fit beside the image and wrap to the nearest available space which is below the image.

    As you can now see the words will sit alongside the image as expected.

    (As an aside note that you will never get a perfect wrap unless the multiple line-heights add up exactly to the height of the image - which would be very rare unless you explicitly controlled it.)

  6. #6
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The word for wraps because you have the word "remember" in an em element with no space and so wraps as a whole with the word before it as though it said "forbefore" as browsers can remove white space before an element starts. Place the space inside the em and it will stay on the same line.
    You're my hero! :-)

    (As an aside note that you will never get a perfect wrap unless the multiple line-heights add up exactly to the height of the image - which would be very rare unless you explicitly controlled it.)
    I realize that; I just want the line height of the paragraph to remain consistent - as it does now.


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
  •