left align container div in shrinking window

[RazorRamon]

I'm centering my container div this way.

    #container{ 
position: absolute;
    left: 50%;
 margin:0 auto;  
  height:100%;
  width:1024px;
     margin-left: -512px;
     text-align:left; 
}

The div centers in the window, however when the user resizes the window to smaller than 1024 the window starts showing the center of the page. How can i make it to where the window will show the left side of my container when the window begins to shrink.

[epicrevolt]

The proper way of centering you content on a page is as follows:

body {
    text-align:center;
}

#container {
    width:1024px;
    text-align:left;
    margin:0 auto;
}

To make the windows shrink when the browser width is below 1024 pixels, 2 CSS3 Methods become available to you: Media Quesries and max and min width. I recommend using Media Queries as they are easier to support in older browsers.

@media screen and (max-width: 1024px) {/*Essentially stating that if the max screen size is 1024, override/add the CSS inside*/
    #container {
        width:100%;
    }
}
/*Or use the code below instead of the original container DIV*/
#container {
    width:1024px;/*Just in case the browser cannot support the below min and max widths, this will be used*/
    max-width:1024px;
    min-width:600px;
    text-align:left;
    margin:0 auto;
}

[almostbob]

pixels are not a layout tool.
pixel size depends on device resolutin
the typical 15" crt 800px wide 53px/inch
typical 'hi-res' crt 96px/inch
this laptop 160px/inch
ipad 264px/inch
12-14px text just got really samll (1mm)
current best practice is em or %, scalar quantities that autoadjust to window size, device resolution, user preference.

body { width:100%; text-align:center;} 
container {width:95%; text-align:left;} 

works in every device