all browsers and resolutions

[ngreenwood6]

I am just trying to set up a page that will display centered with any resolution. For example this website. If you minimize it it still keeps thoses little borders around the outside. I am working with a 1280x1024 resolution (internet explorer) and if I take it down to 800x600 it still displays it the same way. Firefox displays it the same way though. I was hoping that someone could give me an example of how to do this because no matter what I try it does not work. I could also go with something like www.laptoprescue.com where when you change the resolution to 800x600 it just fits to the page rather than being centered. I just cannot seem to get mine to work like that. Any help is appreciated.

[BillyBoB]

What do you mean? The site that you referenced keeps its borders when resolution changes. It doesn't move from being centered either.

[dropfaith]

on your container do this

 

width:90%;margin:0 auto;

 

that will center your page in all resolutions and will always be 90 percent of the width of the users screen

 

id use a min-width:800px; as well to prevent it from being too small

[dbrimlow]

I could also go with something like www.laptoprescue.com where when you change the resolution to 800x600 it just fits to the page rather than being centered.

 

This site is a "fixed-width" layout. It's container, and all the layout graphics, is fixed at 800px wide ... no more, no less.

#container {
  margin: 0 auto;
  width: 800px;
  height:100%;
  text-align:left;
  border:1px solid #000000;
}

 

It's margin is set at margin:0 auto - this tells the browser to use "auto" left/right margins - so as soon as the screen exceeds 800px the container is auto centered (auto default margins each side).

 

It all depends on the  width of your main container select. You can use percentages, too, if you want, like so:

#container {
  margin: 0 auto;
  width: 80%;
  border:1px solid #000000;
}

 

Now the container will resize and stay centered (@10% margin each side) no matter how small or how wide (and depending upon content and embedded graphics of course).

[ngreenwood6]

Thanks for the responses that was really helpful. I had the margin:0 auto; part but i didn't have it in the container because I figured the body was telling it to do that. Your help was appreciated.