When Things Go Really Wrong: Fixing layouts trashed with improper div tags

(Reading time: 3 – 4 minutes)

You’re cruising along, just bashing out articles and posts and pages, maybe writing in WordPress directly, maybe copying in material from elsewhere.

And your entire blog layout crashes.

Maybe the sidebar is at the bottom of the page. Rules and borders are going wacky. Instant despair.

One way this can happen is when you copy html pages from other sources… and these pages have bad markup. Improperly closed div tags are especially troublesome.

Here’s how to find and fix layout issues resulting from improperly closed <div> tags…

(You just backed everything up before getting started, right?)

<!–more–> mess ups

You may want to collect headlines on your main page, and use the <!–more–> directive after a teaser introduction to guide the reader to the body of your articles. This is a very common technique, and if you split a div tag with <!–more–>, your layout will crash.

Here’s what it looks like:

1
2
3
4
5

<div>
Some content here...
< !--more-->
Other content here...
</div>

Note: The wp-syntax plugin used here for pretty-printing the example displays<!--more--> on line 3 incorrectly, which is why the is a space between the “<” and the “!.”

How to find it fast

One way to fix the problem is easy: just remove all the <div> tags, and maybe <p> tags, then add what few you need back in manually.

Go to “General >> Reading” and set the number of posts to display as 1. Then page through each post until you figure out which post is causing all the trouble.

When you find the offending article, then strip only those tags. Wash, rinse, repeat until layout issues are resolved.

If deleting ALL the tags is overkill, then use the W3C Validator, and check the option for displaying the source code of the web page with internal hyperlinks and line numbers. This will let you find the exact problem very quickly, so you can fix it only where it’s broken.

You did back up everything before you started, right?

More resources for debugging WordPress layout crashes

Here’s the best of the articles I found using Google:

• WordPress published an excellent article on layout issues.
• Mike Schinkel’s take on the matter.
• The TextControl plugin may provide you with acceptable alternatives to the WordPress default text editor.
• Update: some information from the WordPress development team on balancing tags when more is used.

Tagged as: Crash, Layout