Part of your problem is coming out here:
Why do you give such a small value for the line-height? Default value is usually around 1.2em or 1.25em. With only 1 em you don't have enough room for the letters going under the baseline like p j or g .... When your window goes small your content is lower then your search button and that makes the vertical scroll bar to appear.
Juste remove this line-height or set it to a proper value.
Then the horizontal scroll bar just appears when the search button is wider then the 20% width. An option is to give something like
to #sidebar, to make it going under the content to avoid the scroll bar.
Otherwise you should know that the overflow:auto is not the only one option to clear the floats. If you don't have any element to add a clear on the bottom of the container, you can use the pseudo-element::after to add the clear:
With that you can remove the overflow:auto and get rid of the unwanted scroll bar appearing. :after works since IE8 but in your case it will even be ok in IE6 and 7 as #page has the layout with the width set.