How to create dynamic positioning?


You see tons of sites with their content very nicely centered, like for example. Even when the window is resized, the content stays centered and when it hits against the side of the page, stops.

I would really like to get this behavior on my website but I'm not really sure how to go about the CSS to make this happen... I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.

Can someone help me figure out how to do something like this?

The standard practice is to have a div that wraps your centered content, such as...

<div id="container">
   ...everything you want to center

And the in your CSS:

#container {
  width: 970px;
  margin: 0 auto; /*first value the margin for top and bottom, auto puts automatic margins in the left and right to center the content*/