Only the first paragraph wraps around the image

  • Resolved theonomo

    (@theonomo)


    15 years, 6 months ago

    Hi All,

    I am using the blocks theme and am editing style.css to make the image wrapping work better. Originally if I tried to align an image to the left of the text, only one line of text would be next to the image. I looked at another theme and finally added the following to my style.css:

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

    Now the first paragraph of my text is aligned next to the image properly, but the second paragraph of text is below the image. If the image is tall and narrow, I would like more than one paragraph of text to align next to it, not just the first paragraph.

    Thanks much,

    Jon

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter theonomo

    (@theonomo)

    15 years, 6 months ago

    It looks like someone else had the exact same problem: http://wordpress.org/support/topic/170490?replies=5

    I added the following to my style.css

    .entry p {
    clear: none;
    }

    I still have the problem…

    Thread Starter theonomo

    (@theonomo)

    15 years, 6 months ago

    You can see my problem here: http://jonti.org/?p=109

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    15 years, 6 months ago

    You have your IMG code inside the Paragraph. That won’t work.

    In WordPress, edit the post. Now, go to the HTML tab. Find the IMG bit at the beginning of the post and make sure that it is on a line by itself. Hit enter at the beginning of the paragraph after it, so that the two are not together in any way.

    Always make your images separate entities in the code, and then you’ll find it flows correctly.

    Thread Starter theonomo

    (@theonomo)

    15 years, 6 months ago

    Thanks for your post, Otto.

    I have put the IMG code on a seperate line. Now, however, the image is all by itself with not text next to it at all.

    I’ll keep playing with it for a while.

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    15 years, 6 months ago

    Okay, you still have two major problems:

    1. It’s AFTER the first paragraph of post content. You need to have the image BEFORE the post content if you want the first paragraph to wrap around on the right side.

    2. This:

    .part, .post .content p {
	margin-bottom:8px;
	overflow:hidden;
}

    That overflow:hidden on the p is making it not wrap.

    Thread Starter theonomo

    (@theonomo)

    15 years, 6 months ago

    Wow, that solved my problem. I am grateful, Otto. I’m curious about what the purpose of the overflow:hidden thing is, but at least my site is working now.

    I’m very impressed with the help I got at this forum 🙂

    Storyman

    (@storyman)

    14 years, 7 months ago

    Another solution is to wrap the image with a div. For example, <div class=”rightalignimage”><img stuff here></div>

    In the stylesheet float the class rightalignimage. Also, assign margins as you like.

    This approach also allows you to use borders.

    Either approach works. Just depends on your needs.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Only the first paragraph wraps around the image’ is closed to new replies.