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 Infinite SEO Plugin
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
I wouldn’t recommend using inline style. Instead of that, we can use a simple CSS class, that will make the content semantic.
That’s why I never use the visual editor.
I think adding this to the style.css file of your current site theme would achieve the same effect and allow users to use the visual editor:
.alignnone { clear:both; }
This is a useful suggestion that I intend to try. Thanks!
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
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.
It’s not just bad form to use inline styles, but in a situation such as this it’s actually your theme at fault. Instead of hacking the code for every image in every post – fix the theme!
Well there’s no need to do that, all you need is to style your WordPress generated classes differently. Take a look what I re-wrote while ago and you can go from there http://codex.wordpress.org/CSS#WordPress_Generated_Classes. Adding DIVs and clears is not really the best practice at least not for me.
For example:
.alignleft {
clear:both;
float:left;
margin: 5px 20px 20px 0;
}
Cheers,
Emil
When you guys use photos in your blog posts are you purchasing the low res version, or just using it and giving credit to the source at the end of the article?
Dehayst – we have some type of agreement worked out with BigStock. Not sure of all the specifics, to tell you the truth. That’s a business/admin issue and is handled by others.
I assumed as much. Seems to work out well for both teams.