WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Text not wrapping after 1st paragraph

[Resolved] Text not wrapping after 1st paragraph

  • The problem is that my blog isn’t wrapping text around images after the first paragraph. Example.

    I’ve read through the codex but to no avail. I’m apparently doing something wrong.

    This is the code from my content section in style.css

    /* Content */
    #main { width: 100%; padding: 20px 0 0 0; }
    .content { float: left; width: 590px; }
    .post { margin: 0 0 25px 0; float: left; }
    .post strong { font-weight: bold; }
    .post h1 a { color: #525252; font-size: 21px; float: left; text-decoration: none; text-transform: lowercase; }
    .post h1 a:hover { background: #f7e495; color: #723f03; }
    .post h1 span { float: left; color: #a8a8a8; font-size: 21px; margin: 0 0 0 5px; }
    .post p { float: left; padding: 10px 0 0 0; color: #505050; line-height: 18px; }
    .post p a { color: #6779b8; text-decoration: none;  }
    .post p a:hover { background: #6779b8; color: #fff; }
    .post blockquote { border-left: 5px solid #fbe9a0; font-size: 16px; font-family: Georgia, serif; float: left; padding: 0px 0 10px 10px; width: 570px; color: #505050; font-style: italic; margin: 15px 0 5px 15px; }
    .post img { float: left; padding: 0 7px 7px 0; }
    .post .meta { background: url(images/comment.gif) no-repeat left; width: 590px; border: 1px solid #b9b9b9; border-left: none; border-right: none; float: left; height: 25px; margin: 15px 0 0 0; font-size: 11px; color: #6b6b6b; }
    .post .meta a { font-size: 11px; float: none; text-transform: lowercase; margin: 0; text-decoration: none; }

    Appreciate any help in this!

Viewing 8 replies - 1 through 8 (of 8 total)
  • I did try deleting float:left; in .post p, as I’ve read that to be an issue and it worked to wrap the text but it didn’t recognize when an image was right or center aligned.

    Hey Sonny,
    Delete the whole “.post img { float: left; padding: 0 7px 7px 0; }” line in your css.

    Add:

    .alignleft { float: left; margin: 0 10px 0 0; }
    .alignright { float: right; margin: 0 0 0 10px; }

    Should fix the problem.

    Thank you!

    I had to also delete float:left; under .post p but only thing is that the wrapping doesn’t work in IE7. Fine in FF and Safari.

    Unfortunately, I don’t have access to IE to test it myself.

    But it seems like it might be a stupid quirk about IE, which may or may not work.

    Try adding img before .alignleft and .alighright:

    img.alignleft { float: left; ….
    img.alignright { float: right; ….

    I haven’t troubleshot with WP for IE in a while, so I’m not positive that will fix it. I can’t see any other conflicting code in your css.

    If that doesn’t fix it, post a screenshot image in here, if you can, so I can see exactly how it f*&@’s up in IE 🙂

    That addition of img didn’t do it unfortunately. Blast that IE.

    Here’s a screenshot of how it looks in IE7.

    Seems like that float: left for your .post p (paragraphs) was needed for IE to wrap the paragraphs. If you add that back, how does it affect the wrapping for FF and Safari?

    Hm – nope. It remains the same and reverts FF back to showing the same way as that screenshot.

    K got it fixed.

    Had to change an IE fix of .post p { width: px } to auto.

    Thanks so much for your help man!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] Text not wrapping after 1st paragraph’ is closed to new replies.
Skip to toolbar