Question

I’m trying to create something like yahoo.com where the content is in the middle and on the outskirts there’s a grey margin (or at least something looking like a margin, not sure if it’s padding). I was successful, however when the page is resized by the user I want this margin to decrease just like it is on yahoo.com but its not decreasing (go to http://www.yahoo.com and resize the page and their margin decreases). Anyone knows how to get this margin to decrease?

 body 
{ 
    font-family: "Lucida Grande", "Lucida Sans";
    background-color: #525252;
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 0px;
    margin-bottom: 0px;
    min-width: 650px;
    min-height: 685px;
    color: #00008B;    
}

table
{
    margin:0;
    padding: 0px 2px;
    border-spacing: 0; /* remove the spacing between the borders. */
    width: 950px;
    height: 685px;
    background-color: #C1CDC1;
}

Answer 1

The trick is to create a container div of fixed width within your body tag for the content and set the margin to auto.

body { 
 text-align: center; 
}
div#container { 
 width: 960px; 
 text-align: left; 
 margin: 0 auto 
}

May I also recommend firebug or something alike as a useful tool to inspect, among other this, css and html of websites?