Div scroll and overflow auto issue in Internet Explorer

I ran into an issue displaying horizontal scroll bars inside div tags in Internet Explorer. However, there was no issue displaying them in Firefox. So I found a simple way to solve this issue:

1) First, since we know the div tag and horizontal scroll bar works fine in Firefox, let's start by testing that in Firefox. Let's suppose you would like your div tag's width to be 585 px long and that you have some line of code that is 900px long. Here is what the div tags would look like:

  <div style="background: white; overflow: auto; width: 585px; ">

       Place your long content here....

  </div>

2) Now go ahead and view your page in both Firefox and Internet Explorer. If your horizontal scroll bar displays ok in both browsers then you are done. However, if you had the same issue I had where the horizontal scroll bar was only displaying in Firefox but not in Internet Explorer then do the following.

Change the width of your current div tag to be 1000px long (or enough to cover the length of your long content) and get rid of the overflow auto:

  <div style="background: white; width: 1000px; ">

       Place your long content here....

  </div>

Then, place the div tag inside another div tag. Add the overflow auto attribute to the outer div tag. Also set the outer div tag's widht to be your desired width (585 px):

  <div style="background: white; overflow: auto; width: 585px; ">

    <div style="background: white; width: 1000px; ">

      Place your long content here....

    </div>

  </div>

Give it a test. Your horizontal scroll bar should now work on both Firefox and Internet Explorer.