Вопрос по CSS

Я хочу сделать рамку для страницы, но при добавлении левой и правой рамки для блока #middle, он начинает выпирать вправо, как раз на толщину рамки.Как бы избавиться от такого еффекта?


Вот css:

#wrapper {
   width: 900px;   
   min-width: 768px;
   max-width: 1024px;
   margin: 0 auto;
   
}

/* Header
----------------------------------------------------------------------*/
#header {
padding-top:40px;   
border:2px solid #000000;
border-bottom:0px;
background-color: #B4B5B4;
height: 150px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomleft: 0px;

}

/* Middle
-----------------------------------------------------------------------------*/
#middle {
   width: 100%;
   position: relative;
   border-right:2px solid #000000;
background-color: #B4B5B4;
}
#middle:after {
   content: '.';
   display: block;
   clear: both;
   visibility: hidden;
   height: 0;
   background-color: #B4B5B4;

}
#container {
   width: 100%;
   float: left;
   overflow: hidden;
   background: #B5E3FF;
   
}
#content {
   padding: 20px 20px 20px 270px;
   
}

/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
   float: left;
   width: 150px;
   margin-left: -100%;
   position: relative;
   background: #f5f5F5;
   padding:20px;
   
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
   height: 50px;
   padding:30px;
background-color: #B4B5B4;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft: 40px;
border:2px solid #000000;
border-top:0px;

}

А вот HTML:

<div id=«wrapper»>

   <div id=«header»>
   </div>

   <div id=«middle»>

      <div id=«container»>
         <div id=«content»>
         </div>
      </div>

      <div id=«sideLeft»>   
      </div>

   </div>

   <div id=«footer»>
   </div>

</div>