How to Keep Images from Running into Your WordPress Content


Everyone seems to have issues with the WordPress editor at one time or another. It seems to have a mind of its own and will do things to your content that you don’t want done.

One issue that seems to occur occasionally is when your text content creeps up around an image even when you tell it not to. No matter what you do, you can’t get the image to simply sit above the text and be separate from it.

 


Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

The Solution

Here’s a solution that should solve your problem.

Go into the HTML view on your editor, and then wrap the image in div tags with some styling that says clear:both;.

<div style=clear:both;>(your image)</div>

Or set out more clearly …

<div style=clear:both;>
(Your image info.)
</div>

Here’s an example:

<div style=clear:both;><a href="http://example.com/wp-content/uploads/musicman.jpg"><img class="alignnone size-full wp-image-375" title="musicman" src="http://example.com/wp-content/uploads/musicman.jpg" alt="" width="125" height="125" /></a></div>

 

 

 

Photo: Malicious The Man from BigStock

Comments (11)

  1. It *is* odd that the editor never seems to work right. Especially since the whole point of having a WordPress installation is to create pages and articles.

    I’ll have to give this a try and see if it helps. Thanks!

    ~ Corey

  2. As others already have commented it is bad practice to use inline styling. On top of that it is totally unnecessary too. As Rilwis and Michelle suggest, you can easily solve the “problem” by adding a { clear:both; } to your stylesheet.

Participate