How to keep website width fixed (irrespective of screen size)

I am designing a website. I want my website to be 980px width. I can easily do it on my laptop by setting the right and left fields of CSS Box as 15%. But my concern is that, when my website is opened on another PC with no widescreen, that 15% will create a distortion. I want to keep my website at 980px whatever be the screen size may be. Please hel开发者_开发百科p!

As you can see in the image attached. The boxes are 15% distance from sides. If screen will be shorter for a pc, then these boxes will overlap.

Rather than trying to explicitly set the left and right margins, just have it auto center.

<div style="width: 980px; margin: 0 auto; overflow: hidden;">
    <div style="float: left; width: 80%;">Left Column</div>
    <div style="float: right; width: 20%;">Right Column</div>
</div>

The key is the auto margin for left and right. This will horizontally align that 980px div in the center and keeping the width no matter what.

I use the following style rules to create fixed-width cross-browser compatible layouts:

body { min-width: 980px; text-align: center; }
#wrapper { width: 980px; margin: 0 auto; text-align: left; }

Put a div with ID "wrapper" inside your body tag, and the wrapper will always be at the center of the screen, and will always by 980px;

set the width on body tag and set CSS style align to center

Create a container div for the portion of the page that you want to be 980px, and set it to width: 980px; margin: 0 auto so that it will be centered and 980px.