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 of my divs to take up the whole width of the page. If not, I would like them all to be centered and 960px. 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 gets wacky.

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

If I understand your question correctly, you want a fixed centered layout that is 960px wide UNLESS the browser window is less than 960px, then you want the layout to be full width.

To do this, wrap your entire html code in a container, like so:

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

And apply this css:

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

Internet Explorer 6 doesn't understand max-width, so if that's a concern you could either give IE6 a fixed width of 960px:

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

or force max-width in IE6 with an even uglier hack:

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

Answer 2

Have your wrapper divs ('white', 'orange', etc) be set to width: 100%; and have your content inside (preferably in another div, set to width: 960px; margin: 0 auto;:

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

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

And use the following HTML:

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

In this way, your backgrounds will appropriately fill the page, and your content will float in the center and work correctly when shrinking the page. I'd recommend against dynamically changing the width of your content, as it presents readability issues (and tends to look gross), but if you really want to, try min-width:

.white {
  min-width: 960px;
}

This will ensure that your divs are always at least 960px wide;

Answer 3

Making an element centered using margin requires the element to have a layout. When using margin-left and margin-right, that would be the width property.

An alternate way to center your elements is :

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

You would move the element 50% from the left and then 400px (half the width) back. This also works for heights.