Multiple Image Alignment between Paragraph Blocks different in Editor/Preview

  • Unknown's avatar
    purdue1947 · Member ·

    Greetings,

    Between two paragraph blocks I have uploaded four images. After “left aligning” and “sizing” (with Image settings) each image, I’ve got them aligned within the width of the paragraphs above and below them in a 2×2 configuration. I then selected the four images and “grouped” them. (see Editor view below)

    (Pardon the variable-width font.)

    *Editor view*
    *******************************************
    Paragraph “above” the image group
    appears to span the full width of the
    document.

    xxxxxxxxxx xxxxxxxxxx
    xIMAGE1x xIMAGE2x
    xxxxxxxxxx xxxxxxxxxx

    xxxxxxxxxx xxxxxxxxxx
    xIMAGE3x xIMAGE4x
    xxxxxxxxxx xxxxxxxxxx

    Paragraph immediately “below” the four
    image group runs along the right.

    The paragraph after that too runs along
    the right.

    Then subsequent parapgraphs realign
    with the left margin again and continue
    to display correctly…
    *******************************************

    Looks great in the Editor, but in Preview, the four images are in a “single column” on the left, with the text from the multiple paragraph blocks immediately “below” them positioned at their right. Ultimately, the remaining paragraph blocks in the document start to “correctly” align with the left margin of the document. (See Preview view below)

    *Preview view*
    *******************************************
    Paragraph “above” the image group
    appears to span the full width of the
    document.

    xxxxxxxxxx Paragrap
    xIMAGE1x h immdia
    xxxxxxxxxx tely “be
    low” the
    xxxxxxxxxx four ima
    xIMAGE2x ge group
    xxxxxxxxxx runs alo
    ng the r
    xxxxxxxxxx ight.
    xIMAGE3x
    xxxxxxxxxx The para
    graph af
    xxxxxxxxxx ter that
    xIMAGE4x too runs
    xxxxxxxxxx along th
    e right.

    Then subsequent parapgraphs realign
    with the left margin again and continue
    to display correctly…
    *******************************************

    Any suggestions?

    Respectfully,
    Jim

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

  • Unknown's avatar
    purdue1947 · Member ·

    Oops!

    Apparently due to forum text translation, in “Preview View” the text below each image is “left-aligned”.

  • Unknown's avatar
    purdue1947 · Member ·

    I “solved” the problem by inserting a Paragraph Block before the Paragraph Block following the four images. This forced that Paragraph Block from “climbing up” the right side of the 2×2 array of images.

    If there’s a more elegant solution, please let me know.

  • kokkieh · Staff ·

    Hi Jim,

    Glad you figured something out.

    Another option that should work is to use a HTML block containing the code <div style="clear:both";></div>. A Spacer block might also work.

    What’s happening here is when you left-align your images, you’re applying a CSS float:left property to them, and when you float an HTML element, whatever element comes after it moves up to fill the space next to the floated element, if possible.

    That that little line of HTML does is to basically cancel out the float at the point that you insert it, preventing the next element from shifting up.

  • Unknown's avatar
    purdue1947 · Member ·

    Thanks for the HTML alternative.

    How do I mark this thread as “Closed”?

  • The topic ‘Multiple Image Alignment between Paragraph Blocks different in Editor/Preview’ is closed to new replies.