How to disable text-wrap when aligning image left or right?

  • Resolved cyberquill

    (@cyberquill)


    10 years, 4 months ago

    How can I align a picture left but WITHOUT the text wrapping to its right. In other words, I want the picture aligned left, but the text starting BELOW it AS IF the picture were aligned center.

    Right now, I accomplish this by aligning the image center and then moving it left via a “position:relative; left: -100px” command, but this method seems a bit cumbersome.

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

  • You can do this by ‘clearing the float’ that causes the image to float left.

    One way is to switch to ‘Text’ mode and entering this HTML just following the image code:

    <div style="clear: both;"></div>

    You can make this process less cumbersome using the Visual Editor Custom Buttons plugin.

    1. Install and activate the plugin.
    2. Go to Admin->Visual Editor Custom Buttons->Add New.
    3. Enter ‘Clear Both’ in the title box.
    4. Select the ‘Single Block’ radio button.
    5. Enter the HTML shown above in the Content box.
    6. Check both the ‘Visual Editor’ and ‘Text Editor checkboxes.
    7. Pick an icon. I like the ‘Width’ one as it shows left-right arrows.
    8. Click ‘Publish’.
      This should give you a new icon in the editor. After you insert your image, place the cursor just after it (before the first character of any text following it) and click the icon to insert the Clear Both HTML.
    Thread Starter cyberquill

    (@cyberquill)

    HTML is fine. Works great. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to disable text-wrap when aligning image left or right?’ is closed to new replies.