Вопрос по 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>