WordPress Visual Editor tutorial Part 3

OK, to fix the stairstepping problem I earlier mentioned you need to clear the float. Technically, shifting a photo to the left or right of text is called floating. The problem is that once a float is turned on, it stays on until removed. Clearing a float sometimes requires a trip to the HTML editor that lurks underneath that tab in right-hand corner of the Visual Editor.

Once you click the HTML editor, you’ll see all the code WordPress has been creating for you. For instance, whenever you’ve inserted a graphic, you’ll see something like this:

<img class="alignnone" src="../graphics/tutorials/wordpress/visual-editor.gif" alt="WordPress Visual Editor" />

So to fix the stairstepping, find the end of the paragraph previous to the one you don’t want stairstepped to the right and insert this code: <br style="clear: both;" />

This is essentially a command to add a hard-line return and clear the float. Your next paragraph will now start all the way to the left again. You can position subsequent graphics left and right and whenever you encounter unwanted stairstepping, pop back into the HTML editor and paste that snippet above. And you won’t see that snippet in the Visual Editor, which means it can be easily to accidentally delete that hard-line return. Just return to the HTML editor and paste it back in.