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 HTML 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 paragraph is italicized and the second and third paragraphs are slammed up against each other.
To find out what happened, edit the post, and switch to the HTML 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
Had you had an opening
div tag and then a closing
div tag 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.
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 HTML 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.
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 HTML editor:
Even if you’ve never had any layout or formatting trouble, take a look at your HTML 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.