Web Page gets cut off

I know a lot of people ask questions on this, but I have a spacing problem with my divs. My main div tag of my web page is 1024px. The problem is that on smaller screens part of my page gets cut off and you have to scroll horizontally. How do I fix that so that the page will fit in any window? (especially the smaller ones) I do not want to use the width:100% property cause I already defined the width as 1024px. Here is my main div tag's properties:

<div id="main" style=" margin: 0 auto; padding-top: 50px; width:1024px;">
my content.....
</di开发者_开发技巧v>

A more common width for a Web page is 960px just to avoid the problem you are encountering. Sorry, the only way to fit your page into those smaller screens is to reduce the width for your main div.

If you are using a fixed width, in this case 1024px, you cannot make the page fit in any window.

You should have a read of Responsive Web Design which explains how to incorporate flexibility into your design.

I'm assuming you don't want it wider than 1024px? If so, set the max-width property on it:

#main { 
    max-width: 1024px; 
}

then, it will fit the screen, but not go larger than 1024.