Image Text Wrapping Problem

  • Unknown's avatar

    I am trying to insert an image into a page so that the image is left-aligned and the text appears next to it.

    However, only the first two paragraphs appear next to it. Then there is a huge white space and the text resumes below the image. It seems to have something to do with setting a style (heading 2) for the third paragraph. If I turn that off, the text will wrap correctly, but I would really like to have the text have that style and not jump down below the image.

    Is there anything I can do?

    Thanks!
    The problem is located on this page:

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Whoops, for some reason my link did not appear in the post. The problem is on: http://psyche2012.wordpress.com/events/

  • Unknown's avatar

    Hi. That blog is private. Unlike staff who can view private blogs for tech support purposes, we here are users like you and can’t see what the problem could be.

    This being said, some alignment problems can be solved by either:
    – selecting the appropriate alignment (left, right, none, etc.) when inserting the image
    – adding the following HTML code after a paragraph
    <br style="clear:both;" />

  • Unknown's avatar

    Hi airodyssey,

    Thanks for the reply. Yes, it’s private – I can’t get it ready to even run past my collaborators until I can get it to stop looking so weird. I guess I thought the wordpress support folks could read it anyway, but maybe they aren’t reading these posts? Does anyone know how to email them directly? I’ve seen this problem posted about in the forum several times, but no clear solution.

    I do have the image left aligned correctly, and I’ve never had this problem before in two previous wordpress blogs, so I thought I knew how to work with the images.

    Where would I insert that code you provided? I tried it in the paragraph where the image is, but that made *everything* go below it. Anyway else it didn’t seem to change anything.

    Thanks!

  • Unknown's avatar

    That white space is the rest of your sidebar. You haven’t inserted the image in the content of the page itself, you have added it to your sidebar using an image widget.

  • Unknown's avatar

    panaghiotisadam,

    Thanks for the reply, but I actually gave up on the post-embedded image because I couldn’t figure out how to get it to work and *reverted* to the image widget sidebar, because I had to get the page moved to my collaborators so they could start working on the design.

    I could set up an unlinked page and reproduce the problem if it would help.

  • Unknown's avatar

    That would help, yes.

  • Unknown's avatar
  • Unknown's avatar

    That’s happening because the CSS of this theme specifies that Heading2 should be full-width, no text-wrap.

    One way to override this is: switch the editor to HTML and change these:
    <h2>
    to this:
    <h2 style="clear:none;">

    Another would be to forget Heading2, type your headings as regular text then format them any way you like using coding in the HTML editor. This has the advantage that they will remain the way you wanted them if you change theme. Headings vary from theme to theme, and in some cases you may be unpleasantly surprised when you switch to a different theme. Example:

  • Unknown's avatar

    Yeehaw!!! That works. Thank you so much!!

    I had gathered from other posts that this had something to do with “clear:none” but I couldn’t figure out where to insert it.

    And I see what you mean about the headings. I will proceed with caution on them.

    Thanks again!

  • Unknown's avatar

    You’re welcome.

    In more technical terms, the CSS of the theme prescribes clear:both for h2 (that is, don’t allow left or right-aligned objects next to it): that’s why to override this you need to add clear:none to the opening h2 tag itself.

    Your first heading seemed to wrap around the image despite that, because you had put the text and the image inside the h2 tags.

  • The topic ‘Image Text Wrapping Problem’ is closed to new replies.