100% width div gets cut off when I scroll right if

Question

I had a problem on my own site with a <div> that is supposed to have 100% width. The code for it is shown below.

#myDiv {
    width: 100%;
    height: 160px;
    background: #f48;
}

This works great except for the following issue:

When my browser window is smaller than the <div>'s content, and I scroll to the right then my <div> will move left with the rest of the page rather than occupying 100% of the width of the page's scrollable area.

This issue has been bugging me for a few hours and just recently I realized that many other sites have the same issue. Including Facebook.com and Stackoverflow.com just take a look at my snapshots below.

Facebook's Bug:

Stackoverflow's Bug:

Answer 1

I've solved this issue for myself with display: inline-block. Here is example: http://jsfiddle.net/z01g0r2d/1/ . Note if you try to set width of the long content as, for example, 200% the solution stops working.

Answer 2

How you tried this? Tested it in IE7:

html, body {
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}

Answer 3

I've tried width: auto; and it's helped.

Answer 4

Ok, solved it! I just have to set the min-width property to the width of that <div>'s content.

Thanks anyways guys!