DIV with overflow:auto and a 100% wide table

Question

I had a problem with excessive horizonal bar in IE7. I've used D Carter's solution slighty changed

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

To work in IE browser lesser than 7 you need add:

<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->

Eran Galperin's solution fails to account for the fact that simply turning off horizontal scrolling will still allow the table to underlap the vertical scrollbar. I assume this is because IE is calculating the meaning of "100%" before deciding that it needs a vertical scrollbar, then failing to re-adjust for the remaining horizontal space available.

cetnar's solution above nails it, though:

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%">
      ...
      </table>
   </div>
</div>

This works properly on IE6 and 7 in my tests. From what I can tell, the "" hack doesn't appear to actually be necessary on IE6.

Change:

overflow: auto;

to:

overflow-y:hidden;
overflow-x:auto;

Okay, this one plagued me for a LONG time. I have made far too many designs that have extra padding on the right, allowing for IEs complete disregard for their own scrollbar.

The answer is: nest two divs, give them both hasLayout, set the inner one to overflow.

<!-- zoom: 1 is a proprietary IE property.  It doesn't really do anything here, except give hasLayout -->

<div style="zoom: 1;">
   <div style="zoom: 1; overflow: auto">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

http://www.satzansatz.de/cssd/onhavinglayout.html
Go there to read more about having layout