Text Not Wrapping Around Images in WordPress

by John Sutton on June 4, 2010

in Wordpress

Had a problem with text not wrapping around images when the images were either floated left or right in a blog post. Here’s how to fix that in version 2.9.2.

Login to the backend. On the left-hand navigation pane navigate to ‘Appearance’ then ‘Editor’. This opens the styles.css file.

Scroll down to the end of the classes section [styles prepended by a period] and insert the following code to float images left.

.alignleft {
display: inline;
float: left;
//add padding and margins and borders as you see fit//
}

Below this, to float images right, insert this code:

.alignright {
display: inline;
float: right;
//add padding and margins and borders as you see fit//
}

You might want to set margins if you want the image to have a little breathing room. HereĀ  is a discussion dealing with this issue.

NOTE: It’s possible that you may not be able to write to the css file which probably means that permissions need to be changed.

{ 1 comment }

Trevor December 29, 2010 at 3:23 pm

Nice, but this seems to only works when wrapping one single paragraph. If you have more than one paragraph to wrap aournd your image, then the second paragraph is been sent next below the image, leaving a blank space in the middle.

So the all issue really is how to get your text to wrap around an image, REGARDLESS of how many paragraph this text consist in.

Indeed, WordPress insert hidden paragraph codes in whatever line you insert, that prevent your text to wrap correctly as soon as you have a return to the next line within the text to wrap.

Any tip about a cross-browser working solution is more than welcome.

Previous post:

Next post: