Breaking your WordPress theme- sidebar moves down?

I’ve posted about this before: and mentioned the same source: Lorelle.

There are two common reasons people have their themes “break” or act oddly:

  1. they’ve copied formatted text from Microsoft Word that starts adding code that “overrides” the CSS of your theme.
  2. the picture or object that they try to place in their post is too big.

You can easily identify the first problem by noticing that your font has changed in a post and everything following it. The way to fix it is to go to your edit post function- click the “quicktag” HTML button- and search out any thing that says “span” “font” and a font name, “H1″ H2” etc- (it will be in the “< " and ">” carrot figures) these are not tags that the standard WordPress interface uses. Anything you undo here- will be able to be fixed in the standard WYSIWG view of the “Write Post” window- where you can reformat to your heart’s content. Sometimes Microsoft Word adds so much trash- it’s easier to copy the content back into Word- and then save it as text only before pasting into the Write Post window.

The second problem- where the sidebar moves to the bottom- typically is only seen by the 90% of people who still aren’t using Firefox. Microsoft Internet Explorer doesn’t understand some of the fundamental code to CSS (still)- and you must test by looking at your site using IE 6 on a PC. The simple solution- use Thumbnails- and never have images wider than about 400 pixels. However if you want to read all the details of this problem- Lorelle has a ton of good links – look at the excerpt of her post- then continue on to the link:
Lorelle on WordPress

One of the more common complaints and problems for new WordPress users is the issue of their images breaking their WordPress Theme. The Theme they choose is wonderful, reflective of their personality and blog, and the moment they upload their first photograph, it seems to break their blog.Web Design Sidebar pushes out over the content areaHave you ever tried to shove a square peg into a round hole? Or squeeze into a size 2 dress when you really should be wearing a 22? The results are what happens to web page designs when someone tries to cram something too big into a small space.

All web pages today feature at least two “columns”, two side-by-side sections to display their content. One is typically called the sidebar and the other is the content or main column or something similar. Each of these columns are known as containers, as they contain content and design elements within their borders. When something goes into these containers that exceeds their inherent width, they tend to stretch and break the design.

Put something wider than the width of the sidebar into the sidebar and it stretches to accommodate it. Since it’s literally pushed beyond its seam, it shoves the content section down to the bottom of the page. Put something wider than the width of the content section into the content section, and it shoves the sidebar around. If what you include in any container on your web page is wider than the designated width, something has got to give and it is usually your web page layout and structure.

The key is to only put things that are the maximum width into these columns (containers) so they won’t stretch and bork your web page design.


Commenting area

  1. Thanks for the link and nice comments.

    I’d like to add that a change in your font or look of your blog isn’t the first sign that you’ve been editing template files or your style sheet (or a post) with a word processor. The fact that your blog is totally borked with an error code or four is the first sign. 😉

    I discuss more about this in When the Blog Breaks: Fixing Your Broken Blog. I sure wish word processors and a blog’s ability to handle their text were compatible, but they aren’t.

    Good work. Keep it up!

  2. Hi,

    I am actually having this problem…and I was wondering about the HTML theory:

    If you click on the HTML quick tag, shouldn’t that be the code section with the and span styles? Also, I edited the post in wordpress (the regular tab) and then went to the HTML where it had added the “span” tags. So if I didn’t do it myself, I would assume it was compatible…

    Thank you for any information you may be able to provide!

  3. Hi Danielle- typically, WordPress doesn’t use the span tags. You possibly pasted them in yourself.

  4. I was having this problem with my website
    It was finally traced back to the most simple social bookmarks. That plugin was deactivated, and the world was right again.

Leave a Reply