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.
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:
” or ″
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.
Thank you for sharing this Panos, the sidebar showing at the bottom was happening to another blogger I know, now I can share this post with people like that blogger who have this problem. :)
Welcome (again) Panos …
What a joy when I saw a newsletter that came from wordpress tips.
I feel very happy ….
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!)
Hola Panos: ¿Recuerdas que me ayudaste a poner un widget de Zenit en mi blog? Pues este desapareción un día. Finalmente jesusbenja del blog “espaciochus” me pasó generosamente un código listo para poner, pero no lo puedo ver. Chus sí lo ve, o sea que los demás lo ven. Yo borré el historial de exploración, cookies, etc y sigo sin verlo. Mi navegador es IE9, será eso? Me alegra poder pedirte ayuda, discúlpame porque sé que estás superocupado con cosas mas urgentes que las mías. Desde ya te agradezco muchísimo, Maizal ¡¡Buena semana!!
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.
By the way, Sensuous Inkspiller, kudos for improving the appearance of 2011!
Panos, yo también me alegré al ver el nuevo post ¡bienvenido! Y gracias, intentaré seguir tu consejo.
“But new post doesn’t mean I changed my mind”
Hhahahahaha… I knew you would return, Mr. Panos!
I’m happy you returned posting! See ya! =D
Thanks. But I never said I’d stop posting; see my reply here:
Thanks – much appreciated. Problem solved, hopefully for good! cheers
You’re welcome. Yes, you’ll never see your front page like that again as long as the auto-correct option is enabled.
Panos, qué alegría verte de nuevo, amigo! :-)
Un enorme abrazo desde lejos…
Muchas gracias Galois!
This was so on time! Major oops! when I kept getting paragraphs stuck together and thought the things were the culprits and deleted them and yipes, my blog page was cross eyed!
Followed these fab instructions and all is well. Much thanks and kudos and all good stuff at ya!
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:
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:
Thumbs up for this helpful post. :)
Thanks TT! Agree with the endnote?
Yes, I do agree with your endnote.
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
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.
oh and I followed the instructions in B above as well as looking for lonely div tags in text widgets to no avail.
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).
ack I feel a little sheepish! I must have been futzing unawares. Thanks tremendously for your quick response. You are doing a great service and it is much appreciated!!
I’m a little hesitant to ask because I don’t know much about this, but I want to decrease the sidebar width on Triton Lite. Is that possible? My site is: goodlifenoalcohol.wordpress.com Thanks!
It’s possible, but only if you have purchased the Custom Design upgrade.
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.
Oh, also, it is fixed, and I do grasp how it happened: I kept asking, and kind people, yourself included, each gave me parts of the whole picture until suddenly, all the sidebar issues went away.
“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…!
I understand you’ve read this:
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:
By the way (since you wrote “I don’t know if the change was brought about by you guys”), I’m not WP staff.
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.
You’re always most welcome “here”!
I can examine the code if you wish. You can paste it in Textsnip and give me the URL you’ll get:
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.
This is what I’m seeing:
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.
a) Which version of Firefox?
b) “Y’all need to hire editors for English”: Oh I agree, only it should be they all need to – I’m not WP staff!
Panos, this is the textsnip http://textsnip.com/3e3e87 thank you.
The blog is http://lolebrity.net and this is probably what I deserve for using a theme from 2008.
You were right, there’s one closing div tag too many. If you’re sure you haven’t omitted anything from the beginning of the code, you should delete the last </div>.
Thanks, I’m not thrilled about hacking Jetpack. But if I must, I must. Surely I can’t be the only person complaining about this.
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!
Had same problem. Now it is solved. Thank you.
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?
Panos, Thank you for responding to my post… I will give it a try and see how I get on as this whole issue is getting on my nerves!
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,
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
You’ve got no extra divs (and I’m seeing your sidebar in place). Yours is either a browser issue or a resolution issue. What’s your screen resolution?
The problem has been solved to my satisfaction. Thanks very much for your suggestion to go to the Settings to resolve this. One of the ‘draft’ posts had this code: or
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…
1) To find threads you’ve started in the forum, you click your username (top right, where it says “Welcome, –“).
2) Your nickname doesn’t become a link to your blog unless you make it so: Users > Personal Settings > scroll down to “Account Details”, paste blog URL in the “website” field, click Save Changes.
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:
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!
Yes, the code is perfectly alright now.