Fixed: Sideba and related layout issues in wordpress

The main posts page of your blog is structured as a series of sections containing other sections containing other sections (below)each one with its own layout and styling. In the HTML of the page, each section is defined by a pair of div tags: an opening one that says start section such-and-such here, and a closing one that says end section here.

<div [etc etc]>
SECTION CONTENT HERE
</div>

If a solitary div tag is accidentally introduced somewhere in a post or in a text widget, the structure of the page gets messed up from that point on. In many themes this results in the sidebar dropping to the bottom; in some themes it results in a different layout issue (such as posts in the sidebar, or posts losing their normal layout or chronological order, or invisible posts, or messed background).

What to do:

A. If the theme you’re using displays the regular sidebar when you view a single complete post, visit the main page of your blog and click on the titles of your latest posts one by one (or click on the title of the latest post then use the previous-post navigation link, if the theme you’re using displays such links). Usually only one of the posts will produce erratic results. In that case you know that the stray div tag is in that post. If you are familiar with HTML, you can examine the HTML of the post and correct it. If not, then
1) go to Settings > Writing: tick the option “WordPress should correct invalidly nested XHTML automatically”, click Save Changes;
2) edit the problem post: switch the editor to “Text” then back to “Visual” and click Update, or make any insignificant change (for instance add then remove a space) and click Update.

If the issue persists, then there is at least one more post with the same problem. Click on the titles of the rest of the posts on the main page to find the culprit(s), correct and update as suggested.

B. If the theme you’re using doesn’t display the sidebar when you view a single complete post (or if you don’t want to bother finding the culprit), then
1) go to Settings > Writing: tick the option “WordPress should correct invalidly nested XHTML automatically”, click Save Changes;
2) go to Posts > All Posts: tick the Title square to select all the posts listed on the screen, select Edit from the Bulk Actions dropdown, click Apply, select Draft from the Status pulldown, click Update; repeat procedure to turn them back to published.

C. If you check your posts as per A and you get the same erratic results no matter which single post you view, or if you updated all your recent posts as per B and the issue persists, then the stray div tag is in a text widget. Unfortunately, the auto-correct option can’t take care of such HTML problems in text widgets: you need to examine the content of your text widgets and correct it manually. Rough guideline, if you’re not familiar with HTML: the number of opening div tags (<div [etc etc]>) must equal that of closing div tags (</div>); if you find an extra closing div tag at or near the end of some code you have created or copypasted, delete it and click Save.

Endnote: Sidebar at the bottom or otherwise messed-up front page usually happens when you copypaste wrong code you’ve found, or when you copypaste content from bad sources such as Word into the Visual post editor, and it’s one of the most frequently reported issues; if you aren’t an experienced coder, then enabling the auto-correct option in Settings > Writing should be one of your first moves when you set up a new blog. (None of us experienced volunteers can fathom why WP insists on keeping the default to off instead of on: if you are an average user, you’ll probably not notice the option, nor understand what it means if you happen to notice it; and if you are an average user, you probably don’t know what causes those layout issues either, so you won’t even look for such an option.)

Update – Rare(r) cases not associated with stray div tags:

1. If you have the Custom Design upgrade, the layout can also get messed up because of wrong CSS editing. For example, the sidebar will drop to the bottom if you tamper with the width of the blog and/or the main column and/or the sidebar (or their padding or margins or borders) in a way that doesn’t leave enough room for the sidebar. Also, CSS is theme specific, so all sorts of issues can crop up if you’ve made CSS changes while using a theme then switch to a different theme without deleting everything from the CSS editor.

2. The layout will get messed up if you’ve copypasted faulty image code with line breaks in any of the bits of info that are inside quotation marks, or if you’ve entered such line breaks yourself (for instance in the alt text). To find out if that’s the case, select View Source from the View menu of your browser and search for either of these:
&#8221; or &#8243;
If you find them near the URL/name of an image file (that is, if you see these entities instead of quotation marks around the alt text or around the width and height numbers), you’ve found the culprit.
If the image had been inserted by copypasting its code, delete it and re-insert it by copying it to your computer and uploading it to your blog. If it is uploaded to your blog, you can switch the editor to Text (=code) and remove the line breaks, or delete the image and re-insert it, making sure there are no line breaks in the “Title” or “Alt Text” fields.

3. A very rare glitch that can cause the same issues when viewing a single post or a static page is the appearance of list item tags in a comment. Visit that post or page, select View Source from the View menu of your browser and search for either of these:
<li> or </li>
If you find them around some text in a comment, go to Comments (dashboard sidebar), edit the comment, delete the two tags, click Update.

4. The layout may also get messed up if there’s an unclosed table tag somewhere

A simplified example),

Structure of main posts page, simplified example, theme Bueno:

Start container

Start top strip
Start-End tagline
Start-End searchbox
End [top strip]

Start header
Start-End blog title
Start-End top nav menu
Start-End header image
End [header]

Start main section
Start left column
Start post — — — — — — —
Datestamp, post title
Featured image
Start post content
Post content
Start-End sharing buttons
End [post content]
Tags
Start-End comments, categories, author
End [post] — — — — — — —
[DASHED SECTION REPEATED FOR REST OF POSTS]
Start previous/next nav links
Start-End Older Entries link
Start-End Newer Entries link
End [previous/next nav links]
End [left column]
Start sidebar
Widgets
End [sidebar]
End [main section]

Start bottom widgets
Start-End widget column 1
Start-End widget column 2
Start-End widget column 3
End [bottom widgets]

Start footer
Start-End left credits
Start-End right credits
End [footer]

End [container]