1,105,402 Community Members

left align container div in shrinking window

Member Avatar
RazorRamon
Junior Poster in Training
79 posts since Sep 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
epicrevolt
Junior Poster in Training
95 posts since Oct 2010
Reputation Points: 6 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

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;
}
Member Avatar
almostbob
Nearly a Senior Poster
3,388 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 425 [?]
Skill Endorsements: 14 [?]
 
0
 

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

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: