There is a seriously annoying issue with WordPress: it is almost impossible to wrap two paragraphs around one image. Sure, the first paragraph wraps, but if it is shorter than than the height of the image, there is a horrible blank space until the second paragraph begins below the image. Preferably, both paragraphs would wrap around the image. Note that I said “almost impossible.” There is a fix, and it doesn’t involve editing your CSS file.

Some people have supposedly solved their paragraph woes by changing a paragraph tag in the style.css document from “clear: both;” to “clear: none;” – but this doesn’t work for most of us. In fact, some of us don’t even have that tag in our document, and when we add it: nada.



Another suggested solution is the placement of the image either inside or outside of the paragraph tags, but some of us only use <br> tags, and when we add paragraph tags, the problem still doesn’t fix. Simply adding <br> or <br /> in between the paragraphs without a line break in the editor also does not fix the problem.

Here are two solutions for wrapping two paragraphs around an image. If you have a fairly new blog with only a few posts and a knack for HTML coding, I recommend using the plugin; but if you have hundreds of posts, and image wrapping is a new formatting feature on your blog, then I suggest the second.

WordPress Plugin: PS Disable Auto Formatting

From the WordPress dashboard, go to “Plugins,” then “Add New.” Search for “PS Disable Auto Formatting.” It should be the first plugin that appears in the list. Select “Install” to the right of the plugin information.

This plugin will disable all visual formatting within the WordPress editor. This includes any line breaks in the HTML editor; however, adding line breaks in the editor simply by hitting enter will make it easier for you to find and edit code in the future.

Place <br /><br /> between paragraphs to create a space between paragraphs. Be sure to place these tags after the last paragraph, as well! You may also use the paragraph tags with <p> at the beginning of a paragraph and </p> at the end. This can sometimes cause other annoying issues depending on the CSS code. If you plan on changing themes in the future, and you don’t code your own themes, you may wish to stick with the <br /> tags.

<img src="http://www.imagepath.com" class="alignleft">This is the first
paragraph that is supposed to wrap around the image.<br /><br />

This is the second paragraph that is supposed to wrap around the image.<br />
<br />

BR Tags

This fix doesn’t really make sense for most of us, especially since two <br> tags (HTML4) or two <br /> (XML/XHTML compliant and suggested) tags give two line breaks, or look like a paragraph break; but it works. The odd, but necessary, part is adding the closing </br > tags.

To make two paragraphs in WordPress wrap around a single image, simply add <br></br><br></br> between the two paragraphs without a line break in the editor.

<img src="http://www.imagepath.com" class="alignleft">This is the first
paragraph that is supposed to wrap around the image.<br></br><br></br>This is
the second paragraph that is supposed to wrap around the image.

These are odd fixes for what seems like should be a simple formatting issue. If you code your own CSS file outside of WordPress, it is a much easier fix. For this reason, it is safe to assume that there is a bug with the WordPress editor.

Tweet