Sometimes when you switch from one template to another (this has happened in both WordPress and in Joomla), your text may appear in unwanted places. Like this:

This is some text that will appear to the far right if coded with float: left; in the img tag. But it will look normal if you clear the float before the text shows up in the code. How does it look now?

See how the text is squished over the right of the image? Strangely enough, in a previous template the text landed below the image, as the author planned it should go. Here’s how one wants the image and text to appear:

This is some text that will appear to the far right if coded with float: left; in the img tag. But it will look normal if you clear the float before the text shows up in the code. How does it look now?

So what is happening here? The answer is the default in the new template for images is to float the image to the left(float:left;). You have a few choices: you can either go into the CSS and take out the line about the image floating to the left (but you do have to locate the line to do so), you can add a class to your CSS to clear certain images OR you can clear the float using inline code. I am going to teach you how to add the inline code to your WordPress post. You need to be working in HTML mode (as opposed to Visual mode).

Here’s how to clear a float:
When you start the paragraph for the text directly below the image, add the following code:

<div style=”clear:left”>text here</div>

The order of the code should be img tag, then a div tag with style=”clear: left”. You can use a paragraph <p style=”clear:left;”> tag instead of the <div style=”clear:left;”> if you like.

Any questions?

More on floats and CSS:

• Float that Image
• Links to tutorials on HTML and CSS