100% width div gets cut off when I scroll right if my browser window is smaller than div's content

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

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

Thanks anyways guys!