Common CSS bug with viewport scrolling

I just discovered a CSS bug in our new website www.mobilife.be. You might want to check out your own websites too, since this bug appears to be present in a lot of sites.

How to check if your website suffers from the viewport scrolling bug?

1) Open your site in a browser window that is wider then the minimum width of your design

2) resize the window so the site no longer fits in it. You now have a horizontal scrollbar

3) scroll to the right

If some of your site elements are "cut off" like the black background of the header bar in the Mobilife screenshot above, your website suffers from this bug.

To give an example of a website that is impacted more severly by this bug, check out these screen shots of the Pukkelpop website below. The whole body of the website is cut off beyond the viewport width.

(note: Pukkelpop is a fantastic site developed by the great people of Inventis. It just shows that even the best sometimes make small mistakes. I'm sure they'll have it corrected by the time you read this)

If you want to know how to solve this bug, browse to Mobilife and check out the CSS. You'll see we (or at least @ingo) solved it elegantly by adding a min width property to the containers DIV contained in the body and putting the width to 100%. This solves the problem in all browsers.