problem with using "width 100%"

Some blocks are set to width 100%. This is actually the width of the browser window, not the page itself.

This caused a problem for me when I used a background colour/image to cover the entire page width (I was using fixed-layout). The result was that the background ended at the width of the browser window, but a scrollbar allows you to scroll past that, where the page is blank whitespace.

The problem was resolved for me when I commented out the lines that have "100%" (without fully understanding what those lines are doing).

#navbar
{
  float: left;
  /*width: 100%; /* 100% causes problems because it is the width of the
                  * browser window, causing a whitespace at the edge of the page
                  */
  margin-left: 0;
  /*margin-right: -100%; /* Negative value of #navbar's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #navbar-inner. */
  height: 3.6em; /* The navbar can have any arbritrary height. We picked one
                    that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6
                    Set this to the same value as the margin-top below. */
}