My store logo is 800px(width) X 200px(height) and is positioned at the center if the homepage. I had also defined the #mainWrapper ID selector as follows:

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 78%;
vertical-align: top;
}

I found that as I shrink the width of the browser, the left sidebox, right sidebox, the main body, and the logo would at first shrink at the same rate. However, as I shrink the browser's width more, the left sidebox, right sidebox, and the main body as a group starts to shrink more than the logo such that they become mis-aligned vertically.

Could anyone advise if there is a way to specify the width that the left sidebox, right sidebox, the main body (as a group) would stop shrinking? I.E. to display the horizontal scroll bar.

TIA.