Left & Right Image Alignment

There are two ways you can align (or “float”) an image: when first uploading it and editing an existing page with an image.

Add a new Image and Float It

Upload your image using the Media button Media button and click ‘next.’ Here you can add alternative text, a caption and title to your image. After you click ‘save’ it will give you options for image alignment and adding alternative text and a link.

You can float an image to the right, left or center of a page. You can also add paragraph text that will float next to the image. Don’t forget to clear the float.

Floating an existing image

When editing a page, you can double click on an image to access the media browser options. Here you can change the display size, choose image alignment, and add alt text and a link. Don’t forget to clear the float.

Clear the Float

It’s important that you clear the float since the content will wrap differently on different sized screens.

Paragraphs and most other kinds of content are easy to clear:

While in the normal Rich Text editor mode, select the content you no longer want to float. From the Styles drop-down select “Clear Floated Elements.”

Clear Floated elements in the Styles Drop-down menu

Horizontal rules and some other elements require that you manually edit the HTML:

  1. Click the Source button View HTML Source Code button
  2. Find the element you want to make stop floating.
  3. add: class="clear-float"

Example code:

Elements that have no closing tag like the horizontal rule:
<hr class="clear-float" />

Learn More

Some functions may require you to edit the source code. Check out the HTML page to learn about some times you must edit the code. Dig deeper with CSS Tricks, All About Floats article.

Leave a Reply