Text failing to wrap around image when set as heading

  • Resolved Simon Varwell

    (@simonvarwell)


    9 years, 4 months ago

    Hi.

    I’m writing a blog post where I have a series of headings (currently set Heading 3, but following problem occurs with all sizes), text under each heading, and a right-aligned image near the top of the page.

    However, the heading text doesn’t wrap around the image in the way that ordinary paragraph text does – leaving me with huge gaps.

    There’s nothing to show off right now to illustrate, as the post is not published.

    Any idea what the problem is?

    I hope my outline makes sense.

    Thank you in advance (and I daresay afterwards too).

Viewing 2 replies - 1 through 2 (of 2 total)

  • This is because the heading styles, by default, are set to display:block in CSS. This means that they won’t let things wrap around them. If you change the CSS to support wrapping headers (by displaying headings inline, or setting the “clear” property to “none”), that should work.

    For example, on this page: https://jgi.doe.gov/charting-short-term-results-of-wetlands-restoration/, you can see that the picture is to the right of the H2.

    I did have to go through and make sure that other headings (such as widget titles, page titles, etc) don’t allow things to be next to them – so you may have the same problem.

    If you don’t know how to do this w/ CSS, I suggest making sure that your images are always going to be next to longer paragraphs, so that they get the text wrapped around them properly.

    Thread Starter Simon Varwell

    (@simonvarwell)

    Thanks Ancawonka. No I don’t know how to do that in CSS, so perhaps I’ll just go for the fix you suggested.

    Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Text failing to wrap around image when set as heading’ is closed to new replies.