“my sidebar dropped in IE!”

I help out quite a bit on the Wordpress Forums. One thing I have noticed - with a ton of frequency are posts with the title mentioned on this article. Several times a day. (It’s almost ridiculous how many people do not pay attention to what others have posted prior to them.)

A small tip for people coming into forums: search. You will most likely find your question has been asked - and answered - a gazillion times before you.

That being said, I’m going to write up this little article in hopes of assisting people who come after it’s published. Chances are, though - I’ll just be linking to it in the forums because I’m getting carpal tunnel from writing the same thing over and over again to bunches of people
So, the question is, why is the sidebar dropping in Internet Explorer? (Or the content? A BIG note here: it’s whatever is to the right of your screen, be it your sidebar or content.)

The simple answer: because IE sucks ass.

But, for the realistic answer - with the solution - please…read on.

First off, the very first thing you should do is validate. There are soooo many reasons to validate your page. One is that, if you don’t, IE will get thrown into what is called “quirks mode” - what I like to call “IE will guess what you wanted it to do (and it’s usually wrong)” mode. The second is, if you’ve overlooked something - like closing a div tag, then validation will find that bitty error for you.

Now, after you validate…and it’s still dropping…

What you are (most likely) experiencing is the IE box model bug. You can read that article, if you are so inclined - but for the majority of the people reading this, it’ll be too “technical” for your eyes. To put it simply, Internet Explorer does NOT follow the W3C specifications for browsers.

A note here on the W3C specs - it’s there, because, in the end, all designers are striving for the same ideal: We want to be able to design a page in any browser we so choose, and have it look the same in every browser that is available. Right now, we rely on hacks and other such things to achieve this goal (::grumblemostlybecauseofIEgrumble::), but we’ve come a long way. Right now, you’re pretty safe in assuming that, if you’re using a browser that is not IE, then it’ll look pretty much the same (or very close) in all browsers except IE. So if you code your site for Opera, Firefox, Konqueror, or any number of other standards-compatible browsers, you will stop many many headaches from coming on. Get it right in those browsers, and IE is actually a very easy fix.

The “box model bug” is, plain and simply, the faulty way Internet Explorer displays “boxes” - or DIVs - on your website. So, let’s say you have a simple 2 column layout for your site. Content on the left and sidebar on the right. They are wrapped in a containing DIV so your site will be centered. Now, say that contining DIV is 700px wide, with no padding, margin of 0. That means, in all browsers, you have 700px to play with.

Now, you decide you want your content DIV to be 500px wide, and your sidebar to be 200px wide. You know, because 500+200=700. Perfect. Now, you decide you want just a little bit of padding on those DIVs, so you change that a bit to:

In Firefox, wonderful.You now have your content DIV set at 500px, but the actual content is 480px (500px - 10px (on left) - 10px (on right) - 480px.) So you meander on over and check it out in IE - and holy shit, the layout is screwed. Your sidebar has dropped. Why?

Be cause IE adds in the padding. What IE sees from your code above is that your outer container is 700px wide, your sidebar is 200px wide, but your content is 720px wide. Therefore, your content DIV pushes out wider than you expect it to be, and since your sidebar is 200px wide, it’s too wide to fit in the space allowed, and drops below your content.

This will also happen in fluid width sites, where there is no outer wrapping container. Say your content is 80% and your sidebar is 20% - if you add padding to the content, it’ll force it wider (80%+20px padding) and the sidebar will, again, drop in IE.

Another possible reason is images within your content or sidebar, and/or any floated element. IE likes to add a 3px margin to floated elements (and sometimes images). So if you have an image (or DIV) that is on your sidebar, and you have it set to 200px, IE will add its lovely mysterious 3 pixels to it, and *bam* - your sidebar is too wide and it drops below your content.

Another culprit is too-wide text - for example, a long word or URL.

For most of these issues, there is a simple fix. Simply “reset” the browser that the end user is using by implementing a “universal selector” in your stylesheet. In other words, add this to the very top of your stylesheet:

Now all margins and padding in all browsers have been reset to “0″.

Then add a conditional comment for IE for the padding you specify. In the above example, the content width was 500px with 10px padding. Works great in Firefox, et al. To fix it in IE:

Place that *after* the call to your regular stylesheet - the safest bet is right before the closing </head> tag.

As for long URLs or long strings of text - you’ll need to shorten them, or break it apart with a line break. That’s all there is to that problem.

So there you have it - how to fix your dropped sidebar problem. Now, if your sidebar is still dropping after applying these fixes, you should validate again. (But, of course, you did that already, right? This’ll be the second time.) Just be sure you haven’t missed anything with the above fixes that might be throwing things off.

Posted by
September 17th, 2006