Блочная верстка

[varvara16]

Я создаю сайт из трех колонок. В левой колонке располагается меню. Есть отступы от границ слева и справа. Но при сворачивании окна размеры границ остаются прежними, а размер самого окна обрезается слева и справа. Помогите, пожалуйста, разобраться. Вот CSS код:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
 
ol, ul { list-style: none;}
 
:focus { outline: 0;}
 
h2, h3, h4 { font-weight: normal;}
 
body {background: #adaca4; font: 14px Arial, sans-serif; line-height: 1.5em; color: #444;}
 
.fix_width {width: 960px; margin: 0 auto;}
.fix_width:after, .left_foot_cont ul li:after {content: " "; display: block; height: 0; clear: both; visibility: hidden;}
 
a {text-decoration: none; color:#173488;}
 
p {line-height: 1.7em;}

#header {background: url(head_bck.png); height: 141px; z-index: 3; position: relative; margin: 20px 150px 0 150px;}
    .logo {float: left; margin: 20px 0 0 20px;}
    .logo h1 a {background: url(logo.jpg) no-repeat 0px 0px; display: block; width: 207px; height: 79px; text-indent: -9999px;}
.lang {width: 80px; height: 18px; float: right; margin: 20px 10px 0 0;}
.lang A {COLOR: #aaaaaa; TEXT-DECORATION: none}
.inf {background: url(inf.jpg) no-repeat 0px 0px; display: block; width: 404px; height: 37px; float: right; margin: 73px 20px 0 0;}

#middle_container {background: url(content_bck.png) repeat; position: relative; top: 0px; z-index: 3; padding-top: 10px; margin-left: 150px; margin-right: 150px;   overflow:hidden;zoom:1;}
#middle_container  h2 {color: #173488; font-size: 18px; border-bottom: 2px solid #d9d9d9; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; margin-bottom: 10px;}
.left_cont, .right_cont, .centered_cont{padding-bottom:30000px; margin-bottom:-30000px;}
    .left_cont {background:#fff repeat-y; width: 240px; margin-right:10px; margin-left:5px; float: left;}
     .left_cont ul  {margin-top: 0px;}
     .left_cont ul li {clear: both; margin: 0; border-bottom: 1px dashed #d0cece;}
     .left_cont ul li a {display: block; padding: 10px 0; min-height: 20px;}
        .left_cont ul li a:hover { background: #c3c3c3;}
        .left_cont h3  {background: #173488;}
        .left_cont h4  {font-size: 14px; color: #fff;}      
        .right_cont {background:#fff repeat-y; width: 230px; margin-left:10px; margin-right:5px; float: left;}
        .right_cont h3 { background: #173488; font-size: 18px; color: #fff; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; margin-bottom: 10px; }
        .right_cont ul { margin-top: 10px;}
        .right_cont ul li { padding: 10px 0 10px 0; border-bottom: 1px dashed #d0cece; }
    .centered_cont {background:#fff repeat-y; width: 450px; float: left;}
    .centered_cont img { margin: 4px 0 5px 0; border: 2px solid #d0cece;}
    .list_text {margin: 10px; font-size: 12px;color: #000000;}   
#footer { background: url(images/footer_bck.jpg) repeat-x; position: relative; top: 0px;margin-left: 150px; margin-right: 150px; margin-bottom: 10px; bottom: 10px;}
.banner {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px; TEXT-ALIGN: center}
 .list_foot_text { margin: 20px 10px 10px 10px;  font-size: 12px;}
    #footer h4 { font-size: 16px; text-shadow: 1px 1px 1px #0d2540; color: #fff; text-align: center; height: 50px; padding: 13px 0; background: url(images/slog_bck.jpg) no-repeat 50% 46px;}

А вот html:

<div id="header">
<div class="fix_width">
    <div class="logo">
        <h1><a href="#">HOME</a></h1>
    </div>
     <DIV class="lang"><SPAN id=selected><IMG 
      src="images/az.gif"></SPAN> <A 
      href="en/index.html"><IMG 
      src="images/gb.gif"></A></DIV>
        <div class="inf">
    </div>
  </div>
</div>
 
<div id="middle_container">
<div class="fix_width">
    <div class="left_cont">
        <ul>
     <li><a href="index.html"><span class="list_tit">INDEX</span></a></li>
     <li><h3><a href="news.html"><h4><b>NEWS</b></h4></a></h3></li>
     <li><a href="about.html"><span class="list_tit">ABOUT</span></a></li>   
        </ul>
        <DIV class=banner><A href="http://www.first.org/" target=_blank><IMG 
      src="images/first.png"></A> <A 
      href="http://www.trusted-introducer.org/" target=_blank><IMG 
      src="images/ti.jpg"></A><br></DIV>
    </div>
 
    <div class="centered_cont">
        <h2>ABOUT</h2>
      <div class="list_text">
        <p>abc</p>
      </div>
 
    </div>
 
    <div class="right_cont">
        <h3>Latest news </h3>
      <div class="list_text">
        <p>abc</p> 
      </div>
</div>
</div>
</div>
 
<div id="footer">
  <div class="fix_width">
  <img src="images/logo1.gif" width="60" height="60" style="padding: 15px; margin-top: 15px; float:left;" />
  </div>
</div>

Заранее благодарю.