Internet explorer creates horizontal scrollbar for vertical scrollbar's width

Question

A div, containing a table has the following CSS styling:

#formulaAlts {
    float: right;   
    height: 200px;
    overflow: auto;
}

This makes it so that when the table is >200px, a scrollbar appears only for the table and the other elements on the page stay put. Great!

Now for our friend IE...
In IE, the element spawns the vertical scrollbar without growing the containing element. To "solve" this, a horizontal scrollbar is created.
That sucks. And I don't want it to suck...

Any ideas?

--EDIT--
I found out that the line

overflow-x: hidden;

forces IE to ignore the horizontal scrollbar. This is better.. but not quite there because now part of my table is invisble.

Answer 1

Careful.

overflow-x

isn't the most widely supported attribute out there.

I tend to go with a containing div with some right padding:

CSS:

div.scroll {
  overflow:auto;
  padding-right:6px;
  /* I've found 6px to be just right my purposes, but try others*/
}

EDIT: You'll need to add a height attribute somewhere for this to work! I usually have a default set in the div.scroll declaration then tweak that for specific cases (most). HTML:

<div class="scroll" >
  <table>
  <!-- your table stuff in here -->
  </table>
</div>