Is there a way to get a fixed width of 100% in CSS?

Question

I am trying to make my site more scalable and would like all my divs to occupy the entire width of the page. If not, I would like all of them to be centered and 960 pixels. The problem is that none of the divs are actually centered when I try margin-left: auto, margin-right: auto ;. When I try to make the width 100%, and then try to resize the window, everything becomes messy.

Here is the site: http://eitanrosenberg.com/newsite/index.html

Here is my CSS:

*
{
    margin:0;
    padding:0;
}

.everythang
{
    margin-left:auto;
    margin-right:auto;
}

.topbar
{
    background-color:#000;
    height:75px;
    margin-left:auto;
    margin-right:auto;
    position:fixed;
    width:100%;
    z-index:10;
}

.logo
{
    color:#FFF;
    float:left;
    font-family:HarabaraRegular,helvetica;
    font-size:45px;
    margin:15px auto 0 20px;
    padding-left:100px;
    position:relative;
    width:160px;
}

.navbar ul
{
    color:#FFF;
    display:inline;
    float:right;
    list-style-type:none;
    margin-right:25px;
    margin-top:15px;
    text-decoration:none;
}

.navbar ul li
{
    display:block;
    float:left;
    margin:15px auto 0 5px;
    padding-right:32px;
}

.navbar ul li a
{
    color:#FFF;
    font-family:HitchcockRegular, helvetica;
    font-size:25px;
    text-decoration:none;
}

.navbar ul li a:hover
{
    color:#0CF;
}

.white
{
    background-color:#F8F8F8;
    background-image:url(gradients/radialg_200.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:300px;
    margin:0;
    padding:50px 0 0;
    width:960px;
}

.hello
{
    color:red;
    font-family:CoolveticaRegular, helvetica;
    font-size:50px;
    margin-left:auto;
    margin-right:auto;
    padding-top:50px;
    text-align:center;
}

.hello2
{
    color:red;
    font-family:CoolveticaRegular, helvetica;
    font-size:35px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    text-align:center;
}

.hello3
{
    color:#0CF;
    font-family:CoolveticaRegular, helvetica;
    font-size:35px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    text-align:center;
}

.orange
{
    background-color:#F93;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:500px;
    margin:0;
    padding:50px 0 0;
    width:960px;
}

.workbar ul
{
    color:#FFF;
    float:left;
    line-height:25px;
    list-style-type:none;
    margin-left:100px;
    margin-right:25px;
    margin-top:100px;
    text-decoration:none;
}

.workbar ul li
{
    margin:2px auto 0 35px;
    padding-right:32px;
}

.workbar ul li a
{
    color:#FFF;
    font-family:helvetica;
    font-size:25px;
    font-style:bold;
    text-decoration:none;
}

.workbar ul li a:hover
{
    color:red;
}

.red
{
    background-color:red;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:500px;
    margin:0;
    padding:50px 0 0;
    position:static;
    width:960px;
}

.red h2
{
    color:#FFF;
    font-family:Helvetica;
    font-size:45px;
    margin-left:100px;
    padding-top:40px;
}

.red ul
{
    color:#FFF;
    float:left;
    list-style-type:none;
    margin-left:100px;
    margin-right:25px;
    margin-top:15px;
    text-decoration:none;
}

.red ul li a
{
    color:#FFF;
    font-family:helvetica;
    font-size:20px;
    font-style:bold;
    text-decoration:none;
}

.faves img
{
    display:inline;
    float:left;
    height:50px;
    padding-top:15px;
    position:relative;
    width:50px;
}

.faves
{
    padding-top:25px;
}

.faves h2
{
    display:inline;
    float:left;
    margin-top:25px;
    padding-top:15px;
}

.lists
{
    margin-top:100px;
}

.list1
{
    float:left;
    width:320px;
}

.list2
{
    float:left;
    width:320px;
}

.list3
{
    width:320px;
}

.gray
{
    background-color:#2e3031;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:700px;
    margin:0;
    padding:50px 0 0;
    position:static;
    width:960px;
}

.gray h2
{
    color:#FFF;
    font-family:Helvetica;
    font-size:45px;
    margin-left:100px;
    padding-top:40px;
}

.resumeImg img
{
    display:block;
    height:550px;
    margin-left:auto;
    margin-right:auto;
    width:900px;
}

Answer 1

margin , . margin-left margin-right width.

:

position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;

50% , 400 ( ) . .

Answer 2

divs ( "", "" ..) ​​ width: 100%; ( div, width: 960px; margin: 0 auto;:

.white, .orange {
  width: 100%;
} 

.white-wrapper {
  width: 960px;
  margin: 0 auto;
}

HTML:

<div class="white">
  <div class="white-wrapper">
    -- content --
  </div>
</div>

, , . , ( ), , min-width:

.white {
  min-width: 960px;
}

, div 960px wide;

Answer 3

, , 960 , 960 , , .

, html- , :

<body>
  <div id="container">
    <!-- your code here -->
  </div>
</body>

css:

#container {margin:0 auto;max-width:960px;}

Internet Explorer 6 max-width, , , IE6 960px:

#container {margin:0 auto;max-width:960px;}
* html #container {width:960px;} /* IE6 hack */

max-width IE6 :

* html #container {width: expression(document.body.clientWidth > 962? "960px");