Sidebar at the bottom and related layout issues

The main posts page of your blog is structured as a series of sections containing other sections containing other sections (see Page 2 for a simplified example), 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.

I agree with om kicau!
Thanks for another great post. I had seen your answers on this type of problem in the forums early on, but this spells it out so clearly and completely.
Thank you for all your help! I visit wordpress tips every time I post anything longer than an ‘aside’–at the very least for your “links to specific points on a page” explanation…(My blog is so full of those now its like that old kids’ board game called Chutes and Ladders!)

I’ve only been here a bit over a month, yet I wouldn’t consider posting anything with even a bit of a trick to it, without having your (and TimeThief’s) blog open as my reference pages. When I saw there was a NEW post from you, I actually screamed out loud. Thank you!

Thank you all for your kind words.
(I should have written this post long ago! But new post doesn’t mean I changed my mind: comments on older posts will never open again.)

@Maizal: I can see your widget (below the image “nuestra-sec3b1ora-de-guadalupe”). You’ve got too many objects on your main page, so if you have a slow connection, or a connection problem, the browser may time out before loading the widget. Try decreasing the number of posts per page to maybe 3 or 4 (in Settings > Reading) and see if that makes a difference.

I’m still having problems with my sidebar showing on the bottom. I set all my posts & pages to draft and then re-published them. This did NOT solve the problem so I ended up deleting all my widgets. This fixed the main content and extend it to a normal size but when I added any widget back in the problem returned. I’m unclear how to check the code? Could you explain how I do this? I’d be grateful for any additional assistance to resolve this matter cuz im getting super frustrated! Thanks. http://www.thefishermanswife.me

a) Since the theme you’re using displays the sidebar when you view a single post, there was no need to turn all your posts to draft etc: clicking on the title of a few posts would have been enough to show you that the problem isn’t in a post.
b) Your problem is your CSS: you were using Bueno before switching to Fresh & Clean, and you had copypasted the entire stylesheet of the theme into the CSS editor (which is the single worst mistake in CSS editing),* so the browsers are now reading two conflicting stylesheets, and some commands that should apply to Bueno are messing the layout of the new theme. Start by deleting everything from the CSS editor.

*When you want to make changes, you make sure the option “Add my CSS to Fresh & Clean’s CSS stylesheet” is selected, and you add only what you change. For example, suppose you want to turn the font of the widget titles to Palatino. The CSS of the theme has this:.widget-title {
border-bottom: 1px solid #CCCCCC;
font: 1.462em/1.9 ‘Droid Serif’,Georgia,’Times New Roman’,serif;
margin: 0 0 1em;
}
In the CSS editor you’ll add this and only this:.widget-title {
font: Palatino,serif;
}

Thank you SO MUCH for this (found in a Google result on a WordPress help forum), you just saved me a bunch of headaches and time, already spent hours trying to work out what’s gone wrong! With much gratitude from someone who can muddle through WordPress, but is not so great at tinkering under the hood :) http://www.cruxcatalyst.com

You’re welcome!
As I’m explaining in the post, WP would have saved thousands of users from having headaches if the auto-correct option was on by default.
And you mean you’re a normal user! What WP does is as if a major car manufacturer expected drivers to know that when their cars start misbehaving they need to plug in a certain fuse that’s there but deliberately left unplugged…

I have just discovered you as an amazing resource. Your blog has shown me how to address a number of issues I’ve been having, but for the life of me, I cannot seem to figure out how to fix this sidebar-at-the-bottom problem, which seemed to appear when I recently added a page. Any thoughts? http://rainbowbeachdunes.wordpress.com Thank you immensely.

Hi and thanks for the compliments!
No, there are no extra tags in your text widgets. Go to Appearance > Custom Design and delete everything from the CSS editor. See my June 14 comment above for relevant advice.

Sorry, that was a rushed reply (because I’m on a beach, with just a laptop that doesn’t have my regular tools, and with a slow connection that doesn’t allow me to check things thoroughly): at first I thought you had copypasted the entire stylesheet in the CSS editor, but now I’m seeing that’s not the case, so forget my suggestion to delete everything. But the problem is in your CSS anyway: you’ve made mistakes with the content width and margin that leave no room for the sidebar. If you can’t figure things out, try posting in the wordpress.com forums (CSS section).

YES. Quite average to below. Did not choose wordpress to ruin anyone’s day. Used it for over 2 years in this, my “average” state and must say, I did everything I was told to do in the beginning, watched all those old videos and was told I was ready to go! Loved it. Loved it. Loved it. Past tense? I’m not sure . . .

In the past I really have always just contacted support and gotten pretty good fixing in pretty fast time. What’s with the new aggresion towards the average user?

And, really, Word input is bad input? I have to buy a mac to use wordpress? Really?

This may seem to you a bazillion-query topic, but it’s a first for me!

This is a huge departure from the hearty welcome I received when I began blogging with wordpress.

You are with wordpress, rigiht? Or are you infiltrated and trying to make people drop off and switch?

I’m so confused. Why not solve all your many, many support-repeat-offenders by being open about it up front? Hmm? Of COURSE we don’t push buttons we know nothing about. Think. That’s how we break computers!

In the meantime, my sidebar comes and goes. I know you have presented cheerful, explicit instructions above, but it is over my head and likely to stay there a long time. I have hundreds of followers. I need to direct them to my next post. Where should I put it? On a broken page? Nope.

So-o-o-o where do I go for help? I don’t call the plumber so he can tell me how to fix it over the phone . . .

Go to Settings > Writing, tick the option “WordPress should correct invalidly nested XHTML automatically”, click Save Changes. Then edit the post “All Children Home School: A True Story”, add then remove a space or make any other insignificant change, click Update.

Remove a space? Huh? I’d call “removing Zemanta photo from two broken posts” a pretty significant change, but that’s what it took. Thanks for tryiing. I’ll learn this someday. Really. But I really never thought I’d have to. Wysiwyg, it is not, but I understand times are difficult and WordPress has to stretch whatever help they can get really thin.
Again, thanks for trying. I truly hope I will not have to bother anyoe any more. I have found the really simple solution: always double-check by the “Preview” button, when using Zemanta. Too simple. But thanks.

Sorry, you’re wrong. Here’s a screenshot of the sourcecode of your problem post before you corrected it:
As you can see, the stray tag (which is always the cause of the sidebar-at-the-bottom issue) is between the first and second paragraphs of text and has nothing to do with the Zemanta image. Once you enable the auto-correct option timethief and I suggested, then any change in the problem post will correct the issue.

As for Word, yes it’s bad imput if you copypaste into the Visual editor, because it introduces bad code that messes things up; it’s safe if you copypaste into the Text (=HTML) editor or if you copypaste via the “Paste from Word” tool of the Visual editor. This has nothing to do with Mac vs PC.

I know I am wrong. About everything computer. Always have been. I understand many, many parts of it, in my own way, and my way is totally, nearly unfixably, wrong. I admit I do not understand.
Hence the need for help. Hello!
At least you were not glad that I am wrong. Thanks for that.
Okay, let me try again.
I have compatibility issues with html. We cannot keyboard paste html into my brain. Perhaps we have learned to paste into the correct window of my brain, the one that translates to pictures.
We shall see.

“At least you were not glad that I am wrong.”
Why on earth would I be glad if you’re wrong? I’m happy when people are right, not when they are wrong! The reason why we experienced forum volunteers are keen on pointing out mistakes or misunderstandings is that we want our sources of information to be as valid as possible therefore as useful as possible to all of us.

Hi there, I hope I can recieve a reply, I just signed up and really know nothing about HTML – I’m using The Morning After but, as you’ll be able to see by going to my blog, my homepage displays “Recent Posts” twice in the sidebar area. How can i fix this? If i remove Recent Posts from the primary sidebar, it wont show up on the pages, as specified in your guide. I really appreciate the help, thank you in advance!!!!

Hi again, forgot to mention that I need my categories to also show up on all pages and the home page. When i signed in today I saw my problem was fixed – homepage showed recent posts once, archives, and search – but when i added categories it all messed up again. I don’t know if the change was brought about by you guys? If so, thank you! But now it seems i still have the problem – i can’t add categories without “recent posts” appearing twice. Thank you again!!

Sorry but my comment was missing text, forgive the consecutive comments… Even when I remove “Recent Posts” from all sidebars and the feature area on the homepage, it still shows them on the left side, what seems to be the primary sidebar. it is also showing “Pages” even though i don’t have them added anywhere either. I’d like to put Categories, Recent Posts, Archives, and Search, on my primary sidebar (the one that shows up on all pages, right?) – and of course with none of them showing up twice. thank you very much for your help and again i apologise for the comments in a row, but when i tried changing one thing, another problem would appear. thanks…!

And you’ve realized that all the important widgets you need must be added to the primary sidebar.
To solve your problem you mustn’t remove all widgets from the secondary sidebar, you must add some other widgets; see here why:

I came here in case there was something I’ve overlooked for my externally hosted blog. I think there’s a flaw in the Jetpack code, but I can’t do a goddam thing about it other than disable it. Seems to have too many closing Div tags.

I’ve gone through and done this. I’ve deleted the image that might have been causing trouble. I’ve manually deleted non-closing HTML. The sidebar is still at the bottom. http://scrapbookhistory.wordpress.com/book/
I have the same issue on my main page, where it looked right yesterday, but the sidebar moved to the bottom when I opened it again last night. I’d appreciate your help.

But I’m using Safari and Firefox; my guess is you’re using Explorer (or some other bad browser version).

The most likely culprit is the image in your Image widget. It’s a lot wider than your sidebar, and you’ve used an amazon URL. The theme automatically downsizes the image, but bad browsers don’t understand that, especially if the image isn’t uploaded to your blog. Copy this version to your computer:

Upload it to your blog via Media > Add New, copy the “File URL” you’ll get, use that URL in the widget.

As for your “book” page, there’s no sidebar on it. If you want it to display the sidebar, edit the page, select the sidebar template from the Page Attributes module, click Update.

Panos – I’m baffled. I have been using Firefox all along. And now, back at my home computer, the home page is showing up as I first had it, with the sidebar. But this morning, using Firefox on another computer, the sidebar materials dumped to the bottom. I’ll be on a third computer later and will look again. What else makes a “bad browser version”?
And you were right about the sidebar template – checking that seems to have fixed the problem on My Books. But since the 2011 theme includes a sidebar, why doesn’t “default template” include the sidebar? Y’all need to hire editors for English, not just for code. I’ll see if I can get the image back in later.

Thank you so much for posting this. My widgets had dropped to the bottom of the page too. At first I tried the post updates, but it was the final hint that solved my problem – an extra “/div” in a text widget I had modified a while back. You’ve saved me much frustration!

well, thank you for the help…it got me looking, it didn’t solve my problem per se, but got me looking…I did exactly what you said to do, and it didn’t fix it, but I did notice that I was trying to autoplay a youtube video and inadvertently (the autoplay didn’t work) but I took the ] off the back of the tag line…when I noticed it wasn’t there, I put it on, and it fixed it, so my problem wasn’t a prob, but with your breakdown of the prob, got me looking through my tags…thank you for the help!!

You’re welcome. Omitting the closing square bracket of a shortcode shouldn’t produce a layout issue: it just renders the shortcode invalid, so you get to see the shortcode instead of the object on the post. If you have enabled the auto-correct option, then maybe you had some other problem as well, and it got fixed while you were correcting the bracket. Are you talking about the blog linked to your username or a different one?

Hi Panos. I’ve tried all your recommendations, but my blog sidebar still separates and shows up at the bottom of the page. The strange thing is that halfway down, some of my older post widen on the screen for some reason I can’t figure out. Is there a way to fix this without deleting all of my posts? I would like to keep them. My blog is mikelimon.wordpress.com. Can you take a look at it for me and offer some suggestions to fix the problem? Thanks,
Mike Limon

I went back and re-read and followed the instructions. I forgot to tick the box at the top of all post, Then i found the drop down menus,and clicked on draft, and update. It seems to have fixed the problem. Thanks for the help.

Don’t know if your reply helped (it’s early and I’ll need some coffee before I read it thoroughly) but here was my fix: delete/draft the two posts that “caused” the mysterious shift and then re-enter and upload them (i just cut and pasted the text into a word document).

A careful reading of your post may help my “random return being ignored” problem, so I thank you for your time and patience.

Hi Panos — SO glad I found your post on this. Unfortunately I’ve tried everything you suggested (twice) and nothing seems to be bringing the sidebar back up. I’m using Chrome, and the sidebar was there just last week, so I assumed it was the latest post had the div issues. But nothing is fixing it. Can you check it out? Thanks. stlredcross.wordpress.com

Hey,
thanks for your replay to my support question and for this helpful article here.
Unfortunately none of this could help me. I did the “B” part, which didn’t change anything, then I looked through the widgets (and there are no comments on the 1st page) and looked into the source for wrong image links.
I couldnt find anything. And I didn’t change the style or something and didn’t change anything in the CSS.
Do you have any idea what’s wrong with my blog design?

You’re welcome, but how can I help without a link to the blog in question? I’m not seeing any recent responses to my forum replies either, so I can’t tell who you are. Please continue in the forum, so I can see which blog you’re referring to.

hey, sorry I thought the blog would be linked with my WordPress Profile. My blog is: indielikat.wordpress.com
I’d rather answer here than in the forum as I don’t get any notifications about new posts there…

3) The problem post is the one titled “2012”. Among other things, it’s got 4 wrong opening div tags and 7 wrong closing p tags. My method B would have corrected the sidebar: if it didn’t, then you either missed some step or you didn’t select that post when you tried the trick. You can follow steps 1 and 2 under method A now.

But the post has a lot of junk code anyway (because you pasted the content from another source). If you really want to clean it up, then (instead of method A) edit the post, switch the editor to Text, and delete all of these:

<div>
</div>
<p>
</p>
<div id="yui_3_7_2_1_ETC_ETC">

You may then need to switch back to Visual and enter some paragraph breaks, after you select all and select Paragraph from the Format tool (row 2 tool 1).

In the future, never copypaste from other sources into the Visual editor. When you need to paste, paste into the Text editor.

Thank you so much!!
I first thought of this post being the problem but when I checked it with ‘one post per page’ as WordPress support suggested, the sidebar didn’t move, that’s why I got confused.
But now as I deleted all those div-stuff it’s perfectly alright!

Author

Recent Posts

Subject Index

Search for:

Announcement 22/03/2012:
After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

2,727,394 views

Views per month:

Note: if you see ads on this site, they are placed by WordPress, not me.

Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.