Having Trouble Aligning Images Left or Right in WPMU?

The GUI for inserting images seems to readily accept left and right floats (or the deprecated “align”), and if you use the Advanced tab in the add image dialog box you even get the option to add custom styles to the image such as a margin around the image. This looks very full featured, and so easy for the novice.

Unfortunately, many of the older templates currently on offer do not have the CSS necessary to implement the approach this version of WPMU takes. Atahualpa, the theme I’m using in this blog (today), does seem to contain the CSS necessary to handle the float issue with ease.

Frustrated by the teaser of left/right alignment of images and text wrapping nicely around it, and remembering a journalism colleague’s words that WordPress Multiuser didn’t work so well for his journalism class because they couldn’t make the text wrap around the images, I took a little time yesterday to fix this problem using the DIV element and an inline style.

What to do:

Insert your image and size it as you see fit. Don’t bother to align since it won’t work, at least not for many of the templates. (Alternatively, try the alignment. If it works, no sweat. If (When?) it doesn’t work, read on.

Once the image is nestled in your page or post, select the HTML tab. You’ll see something like code describing the presentation of your image and any associated caption.

Put a <div style=”float:right;”> at the front of that code-like stuff to float your image to the right and have text wrap to the left. Use “float:left;” for the reverse effect.

Put a </div> at the end of that code-like stuff to close the DIV element and effectively wrap your image within an inline styled DIV element that applies a float to your image.

Save your Draft, Preview your page, and if all is well, Publish!

Here’s the code in action.

Lorum text wrapped to the left of a right-floated image

I’ve added a left margin of 10px to keep text from running into the image box (Atahualpa doesn’t seem to do well with a margin added via the dialog box)

The right way to do this is to add the missing CSS, something that’s not possible given the limited admin capabilities in WPMU. Of course, that’s the whole point of this sandbox test of WPMU! What can – and can’t – you do in WPMU?

Given what I can do with this limited admin offering, the inline approach strikes me as a reasonable workaround!

Will students take the time to do this? Will they care about floating an image to the right or to the left? Hmm.