Why do these two pages have different column sizes?

I'm trying to build a website with a uniform layout.

These开发者_高级运维 two pages have the same CSS: page1, page2. I set the size of the main "columns" (the blue and red ones) to be relative sizes of their containing div, and I expected their size to be the same across different pages.

However, when these two pages are rendered, they have different absolute size in pixels. What causes this difference?

You are using relative widths (percentages) and the scrollbar that appears on the larger page makes the available width smaller, so all elements will be smaller.