如何使一个HTML5页面具有恒定的宽度？

所以，我正在制作一个网站，当宽度缩小时，它开始看起来真的被抬起来了。我想使它的部分宽度保持不变，并且只需使用水平滚动即可左右移动。我希望这是有道理的。如何使一个HTML5页面具有恒定的宽度？

HTML5：

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <title>Welcome to Alpha Kits!</title> 
    <meta charset = "utf-8"/> 

    <link rel = "stylesheet" href = "style.css" type = "text/css"/> 
</head> 

<body class = "body"> 
    <header class = "mainheader"> 
     <!Temp Logo><img src = "maxresdefault_2.png"> 
     <meta charset = "UTF-8"> 

     <nav><ul> 
      <li><a href = "index.html">Home</a></li> 
      <li><a href = "staffmembers.html">Staff Members</a></li> 
      <li><a href = "forums.html">Forums</a></li> 
      <li><a href = "photovideo.html">Photos & Videos</a></li> 
      <li><a href = "donate.html">Donate</a></li> 
     </ul></nav> 
    </header> 

    <div class = "maincontent"> 
     <div class = "content"> 
      <article class = "topcontent"> 
       <header> 
        <h2><p>Welcome to Alpha Kits!!!</p></h2> 
       </header> 

       <footer> 
        <p class = "post-info">This post was written by Doctor__Redstone</p> 
       </footer> 

       <content> 
        <p>Doctor__Redstone has a small eye</p> 
       </content> 
      </article> 

      <article class = "bottomcontent"> 
       <header> 
        <h2><p>Forum Rules</p></h2> 
       </header> 

       <footer> 
        <p class = "post-info">This post was written by syndicatebuddy01</p> 
       </footer> 

       <content> 
        <p>syndicatebuddy01 has a smaller eye</p> 
       </content> 
      </article> 
     </div> 
    </div> 

    <aside class = "top-sidebar"> 
     <article> 
      <h2>Top Sidebar</h2> 
      <p>Something will go here eventually</p> 
     </article> 
    </aside> 

     <aside class = "bottom-sidebar"> 
     <article> 
      <h2>Bottom Sidebar</h2> 
      <p>Something will go here eventually</p> 
     </article> 
    </aside> 

    <footer class = "main-footer"> 
     <p>Copyright &copy;Nathan (CFH_Games) http://www.youtube.com/CfHgAmEs</p> 
    </footer> 
</body> 
</html>

CSS3：

body { 
    background-image: url('background.jpg'); 
    color: #000305; 
    font-family: Arial; 
    line-height: 1.5; 
    text-align: left; 
} 

a { 
    text-decoration: none; 
} 

a:link, a:visited { 
    color: #0000A0; 
} 

a:hover, a:active { 
    background-color: #0000A0; 
    color: #FFFFFF; 
} 

.body{ 
    margin: 0 auto; 
    width: 70%; 
    clear: both; 
} 

.mainheader img { 
    width: 100%; 
    height: auto; 
    margin: 2% 0; 
} 

.mainheader nav { 
    background-color: #FFFFFF; 
    background-image: url('dirt.png'); 
    font-weight: bold; 
    font-family: "MineCrafter 3 Regular"; 
    font-size: 100%; 
    text-shadow: 3px 0 0; 
    height: 40px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.mainheader nav ul { 
    list-style: none; 
    margin: 0 auto; 
} 

.mainheader nav ul li { 
    float: left; 
    display: inline; 
    font-style: bold; 
} 

.mainheader nav a:link, .mainheader nav a:visited { 
    color: #FFFFFF; 
    display: inline-block; 
    padding: 10px 25px; 
    height: 20px; 
} 

.mainheader nav a:hover, .mainheader a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited { 
    background-color: #0000A0; 
    text-shadow: none; 
    color: #FFFFFF; 
} 

.mainheader nav ul li a { 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.maincontent { 
    line-height: 20px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.content { 
    width: 70%; 
    float: left; 
} 
.topcontent{ 
    background-color: #FFFFFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 3% 5%; 
    margin-top: 2%; 
} 

.topcontent header h2 { 
    color: #0000A0; 
    font-family: "MineCrafter 3 Regular"; 
} 

.bottomcontent{ 
    background-color: #FFFFFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 3% 5%; 
    margin-top: 2%; 
} 

.bottomcontent header h2 { 
    color: #0000A0; 
    font-family: "MineCrafter 3 Regular"; 
} 

.top-sidebar { 
    width: 21%; 
    float: left; 
    background-color: #FFFFFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    margin: 1.3% 0 1.3% 3%; 
    padding: 2% 3%; 
} 

.top-sidebar article h2 { 
    color: #0000A0; 
    font-family: "MineCrafter 3 Regular"; 
    font-size: 140% 
} 

.post-info { 
    font-style: italic; 
    color: #999; 
    font-size: 85%; 
} 

.bottom-sidebar { 
    width: 21%; 
    float: left; 
    background-color: #FFFFFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    margin: 1.3% 0 2% 3%; 
    padding: 2% 3%; 
} 

.bottom-sidebar article h2 { 
    color: #0000A0; 
    font-family: "MineCrafter 3 Regular"; 
    font-size: 140%; 
} 

.main-footer { 
    width: 94%; 
    height: 40px; 
    float: left; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    background-color: #FFFFFF; 
    margin: 2% 0; 
    padding: 0 3% 
} 

.main-footer p { 
    width: 92; 
    margin: 1% auto; 
    color: #0000A0; 
}

来源

2013-12-09 user3022957