Sometimes formatting and layout issues can be caused by stray HTML in your posts. Here’s how to find and correct these errors. 

Sometimes a formatting error on the front page of your site, such as your sidebar suddenly falling down into your footer area, can be caused by some faulty HTML.

If you check your site one day and notice things look strange, take a look at the Text editor of your most recent post, and see if any HTML code jumps out at you.

If you’re not really sure what to look for, this document provides some examples to better help you understand what faulty HTML can do.

Note: The most frequent reason for reason for stray HTML is pasting text or images from other applications. To avoid this problem in the first place, always use the paste as plain text button.

An example of HTML causing formatting errors

Let’s say one day, you load your blog, and you notice that your most recent post looks like this:

For some reason, the first two paragraphs are indented, the second paragraph is italicized, and the third paragraph is slammed up against the left margin, with no indentation at all!

To find out what happened, edit the post, and switch to the Text editor:

Now, take a look at the HTML in the post, and you’ll notice a few things:

You know from Beginning HTML that every HTML opening tag needs a closing tag, and vice versa. But here, you have an opening span tag with no closing span tag.

There is also have a closing div tag followed by an opening div.

Oops!

Had you had <div></div>, you’d probably be ok, even though that code wouldn’t be doing anything and so is unnecessary.

But because you have </div><div>, the editor is reading this as an open div with no close, and that’s messing everything up.

Simply delete all those tags and the formatting problem is fixed.

↑ Table of Contents ↑

An example of HTML causing weird spacing

Perhaps you’re drafting a post and inserting some images. Everything looks fine in the Visual editor, but when you preview the post, there are giant gaps between the images like so:

You can see we’ve used the images from this very support page as an example. ;)

If you edit your post, and switch over to the Text editor, you’ll see the following:

You know from Advanced HTML that those symbols are line breaks. Somehow extra line breaks were inserted while you were adding your images and moving them around. Deleting those will delete that big gap in your post.

↑ Table of Contents ↑

Fixing a sunken sidebar

If your sidebar has mysteriously sunk to the bottom of your front page, this most likely means that there is some extra HTML code in one of your posts breaking the layout. The most common culprit is an unclosed div tag, as we saw in the example above.

Usually, the extra tag will be in one of the posts you just published prior to noticing your sidebar was gone. Edit your last few posts and check out the Text editor:

Bingo!

Even if you’ve never had any layout or formatting trouble, take a look at your Text editor from time to time! As you become more familiar with what proper HTML looks like, it will become more and more obvious to you what (if any) HTML in your posts is affecting your site’s appearance and how.