How best clear:right, after text wrapped around image

  • I’m runnning WordPress 5.0.2.

    I need a series of paragraphs, each with an image floated right. But if the text is smaller than the height of the image, the following para needs an html clear:right so that it starts at the correct place.

    How best achieve this?
    I can code html, but the eventual users can’t.

    I’ve added:
    .group:after { content: “”; display: table; clear: both; }
    to the Customised Additional CSS.

    And on the page I’ve surrounded the paragraphs with:
    <div class=”group”>
    …. para’s here …
    </div>

    But it doesnt seem to work:(

    As a second question – my 2 lines of html
    1) <div class=”group”>
    2) </div>
    Both say on the edit page “This block contains invalid or invalid content”
    How should I handle it??

    The page I need help with: [log in to see the link]

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

  • The new editor doesn’t like any other HTML “loose” mixed in. Hopefully they will fix that, eventually.

    If there will only be one paragraph per image, you could modify your CSS from
    .group:after to .group p:after. Or just use .group p {clear: right}. At least each image should be .group img {clear: right}.

    Thread Starter gretche

    (@gretche)

    Thanks @joy,

    But tried your code and still not working. S I tried the following:
    group img:after { content: “abc”; display: table; clear: both; }

    And abc isn’t displayed.
    I’ve updated chrome (just in case).
    But still doesn’t work.
    I’ve viewed he html of the page and the style IS there.

    What could be wrong?

    Replaced elements like img do not do psuedo elements (:before and :after), so don’t expect to get .group img:after to do anything.

    Thread Starter gretche

    (@gretche)

    Thanks, I didn’t realise that.

    Thread Starter gretche

    (@gretche)

    Still looking for the best solution, And Gutenberg editor doesn’t help!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How best clear:right, after text wrapped around image’ is closed to new replies.

Tags