Understanding and troubleshooting floated images

Why does this happen?

Text may get cut off in weird positions because of how you float images and other elements in your blog post.

why does this happen?

Here is a classic example of a problem caused by floated images. Other examples of float problems are when text appears to the left or right of the image when you don’t want it to.

What is a Float?

Image modified from Chris Coyier (Source)
Image modified from Chris Coyier (Source)

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”.

Similar to print design, floated elements have text wrapping around them. The important point to note is that floated elements affect the layout and positioning of other items on the page. This is what causes the text to be cut off in the example above.

Un-float the image

un-float the image

To fix the problem, locate the post in your WordPress dashboard and navigate to the post editor. Here we can see more clearly how the text is wrapping around the right edge of the image.

Click on the image to select it. At the bottom of the post editor WordPress will tell us the CSS classes applied to the image. alignleft is the CSS class that floats the image left. To unfloat the image, click the left alignment formatting button in the toolbar. This will toggle the image from being aligned left back to no alignment.

Place the image on its own line

place the image on its own line

Use paragraphs to place the image on its own line. You can do this by placing your cursor in the post editor and pressing the Return key.

Avoid this problem when inserting images

avoid this problem when inserting images

You can avoid problems like this from the outset when inserting your images in the Media window of WordPress. Select the image you wish to insert. On the right side of the window, scroll down to reveal the Alignment settings. Select None before inserting the image into your post.