WordPress.org

Forums

[resolved] Only the first paragraph wraps around the image (8 posts)

  1. theonomo
    Member
    Posted 6 years 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

  2. theonomo
    Member
    Posted 6 years 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...

  3. theonomo
    Member
    Posted 6 years ago #

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

  4. 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.

  5. theonomo
    Member
    Posted 6 years 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.

  6. 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.

  7. theonomo
    Member
    Posted 6 years 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 :)

  8. Storyman
    Member
    Posted 5 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic