Здравствуйте. Я создаю сайт из трех колонок. В левой колонке располагается меню. У сайта есть отступы слева и справа. Но при сворачивании окна размеры границ остаются прежними, а размер самого окна обрезается слева и справа. Помогите, пожалуйста, разобраться. Вот CSS код:
А вот html:
Заранее благодарю.
Код:
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 */
#header { background: url(images/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(images/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
}
.lang #selected {
COLOR: red}
.inf { background: url(images/inf.jpg) no-repeat 0px 0px; display: block; width: 404px; height: 37px; float: right; margin: 73px 20px 0 0; }
#middle_container { background: url(images/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; }
span.list_tit { font-size: 14px; color: #173488; padding-left: 10px;}
span.list_tit_right { font-size: 14px; color: #a1493a; }
span.list_text { font-size: 10px; color: #757474; }
.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
}
.banner IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 15px; MARGIN-LEFT: 3px; BORDER-LEFT: 0px; MARGIN-RIGHT: 3px; BORDER-BOTTOM: 0px; HEIGHT: 50px
}
.footer img { border: 1px solid #d0cece; }
.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; }
.embl { background: url(images/logo1.gif) no-repeat 0px 0px; display: block; width: 60px; height: 60px; float: left; margin: 18px 0 10px 10px; padding: 18px 0 10px 10px;}
.left_foot_cont { width: 545px; float: left; margin-top: 25px; padding-right: 24px; }
.left_foot_cont ul li { clear: both; border-bottom: 1px dashed #d0cece; margin-bottom: 15px; padding-bottom: 15px; }
.left_foot_cont ul li img {
float: left;
border: 2px solid #d0cece;
padding-top: 20px;
}А вот 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>Заранее благодарю.
