Проблема с разметкой страницы

[marsowy]

Доброго времени суток!

делаю сайт на joomla 1.5.15 ссылка на сайт confiskatonline.ru

на всех страницах после добавления позиции left в шаблон сайта образовалась проблема - содержание страницы съезжает вниз, если разрешение монитора меньше 1280х768!

ниже привожу файлы шаблона и css:

<?php if($this->countModules('left')) : ?>
	  <div style="width:160px; height:600px; float:left; padding:40px;">
		 <jdoc:include type="modules" name="left" />
	  </div>
   <?php endif; ?>   
   <div id="wrapper" style="float:left;">
	  <div class="clr"></div>   
	  <div id="container">
		 <div id="page_content">
			<?php if($this->countModules('right')) : ?>
			   <div id="right_outer">
				  <div id="right_top"></div>
					  <div id="right_inner_float">
						 <div id="right_inner">
							<jdoc:include type="modules" name="right" style="rounded" />
						 </div>
					  </div>
					  <div id="right_bottom"></div>
				   </div>
			<?php endif; ?>	  
			 <div id="content_out<?php echo $contentwidth; ?>">
			   <div id="content_outer">
				  <div id="content">			 
					  <jdoc:include type="message" />
					  <jdoc:include type="component" />
					  <jdoc:include type="modules" name="intext_bottom" />
				  </div>
				  <div class="clr"></div>
			   </div>
			</div>
		 </div>

html {
  height: 100%;
}
body {
   height: 100%;
   margin:0;
   padding:0;
   font-family: verdana,sans-serif;
   font-size: 12px;
   color: #505050;
   background-color: #fff;
   line-height : 145%;
}
#header_container {
   width: 100%;
   height: 110px;
   background-color: #000;
   background-repeat:repeat-x;
   margin-top: 1px;
}
#header {
   width: 998px;   
	height: 110px;
   margin:0 auto;
   padding:0;
}
#flashhg {
   width: 100%;
   height: 100%;
}
#image_logo {
   text-decoration:none;
   float:left;
   width: 830px;
   height: 110px;
   margin: 0 0 0 25px;
   background-image:url('../images/logo.gif');
   background-position: left top;
   background-repeat: no-repeat;
}
#text_logo {
   text-align:left;
   text-decoration:none;
   float:left;
   width: 830px;
   height: 55px;
   margin: 0 0 0 25px;
}
#logo_text {
   width:auto;
   font-family: Arial black;
   font-size: 42px;
   line-height: 70px;
   height: 55px;
   overflow:hidden;
   color: #e2001a;
   text-transform:uppercase;   
}
#logo_slogan {
   width:auto;   
   font-family: Arial black;
   font-size: 18px;
   line-height: 18px;
   color: #fff;
   height: 50px;
   padding: 5px 0 0 100px;
   line-height: normal;
   text-transform:uppercase;   
   overflow:hidden;
}
/* normal topmenu on position user3*/
#navigation_container {
   width: 100%;
   height: 35px;
   background-color: #ff0000;
   background-image:url('../images/dropdown_menu_container.gif');
   background-repeat:repeat-x;
}
#navigation {
   width: 998px;
   height: 35px;
   padding:0;
   margin: 0 auto;
   text-align:center;
   border-left: 1px solid #f24d4d;
}
/* CSS dropdown menu on position dropdown_menu */
#dropdown_menu_container {
   width: 100%;
   height: 35px;
   background-color: #ff0000;
   background-image:url('../images/dropdown_menu_container.gif');
   background-repeat:repeat-x;
}
#dropdown_menu {
   overflow : visible;
   width: auto;
   width: 998px;
   height: 35px;
   padding:0;
   margin: 0 auto;
   text-align:center;
   border-left: 1px solid #f24d4d;
}
#user_modules1_container {
   width: 100%;
   float: right;
   height:auto;
   border:none;
   padding:0;
   margin:0;
   background-image:url('../images/user_modules1.gif');
   background-repeat:repeat-x;
}
#user_modules1 {
   width: 998px;
   height: auto;
   margin: 0 auto;
}
#user_modules1_float {
   float:left;
   width: 998px;
   height: auto;
   border:none;
   padding:0;
   margin: 0;
}
#user5_outer {
   float:left;
   width: 31.3%;
   padding: 0 1% 0 1%;
   overflow:hidden;
}
#user6_outer {
   float:left;
   width: 100%;
   padding: 0 1% 0 1%;
   overflow:hidden;
}
#user7_outer {
   float:left;
   width: 31.3%;
   padding: 0 1% 0 1%;
   overflow:hidden;
}
.line {
   width: 100%;
   height: 5px;
   background-image:url('../images/line.gif');
   background-repeat:repeat-x;
}
#wrapper {
   width: 998px;
   margin: 0 auto;
}
#search {
   float: right;
   margin:0;
   padding:0;
   height: 30px;
   margin: 20px 0 0 0;
   height: 30px;
   width: 140px;
   background-image:url('../images/search.gif');
   background-repeat: no-repeat;
}
#search .inputbox {
   margin: 0 0 0 11px;
   height: 13px;
   font-size: 10px;
   padding: 0 2px 0 2px;
   color: #505050;
   width: 114px;
   border: none;
   background-color: transparent;
   height: 15px;
}
#search .inputbox:hover {
   color: #ff0000;
}
#top_outer {
   width: 514px;
   height: 150px;
   float:right;
   background-image:url('../images/top_outer.gif');
   background-position: center top;
   margin: 15px 10px 0 10px;
   overflow: hidden;
}
#container {
   text-align:left;
   padding: 0;
}
#container2 {
   text-align:left;
   background-color: transparent;
   margin:auto;
}
#page_content {
   padding: 0px;
   margin: 0;
   width: 100%;
}
#right_top {
   float:left;
   height: 25px;
   width: 295px;
   background-image : url(../images/right_top.gif);
   background-repeat : repeat-y;
}
#right_outer {
   float : right;
   width : 295px;
   padding : 0;
   margin : 0;
   background-color:#f7f7f7;
}
#right_inner_float {
   width : 295px;
   float : left;
   background-image : url(../images/right.gif);
   background-repeat : repeat-y;
}
#right_inner {
   float : none;
   padding: 0 2px 2px 8px;
   width : 288px;
}
#right_bottom {
   float:left;
   height: 25px;
   width: 295px;
   background-image : url(../images/right_bottom.gif);
   background-repeat : repeat-y;
}
#content_outer {
   float:left;
   width: 99.8%;
   margin-bottom: 10px;
   background-image : url(../images/content.gif);
   background-repeat : repeat-x;
   background-position:center bottom;
}
#content_outmiddle {
   margin: 0 300px 0 0;
}
#content_outright {
   margin: 0 300px 0 0;
}
#content {
   float:left;
   padding: 0 10px 10px 10px;
   min-height: 400px;
   width: 98%;
}
table.contentpaneopen {
   width : 98%;
}
table.contentpane {
   width : 98%;
   padding : 6px;
   margin : 6px;
}

заранее благодарен за любую помощь

[stars]

а чему вы удивляетесь?

тут

	  <div style="width:160px; height:600px; float:left; padding:40px;">
		 <jdoc:include type="modules" name="left" />
	  </div>

и тут

#wrapper {
   width: 998px;
   margin: 0 auto;
}

складывает width, и считаем... Чтобы не куда не что не улитало надо изначально делать сайт 900~950px а лучше сразу резиной...

[marsowy]

не удивляюсь, но пока не понял как сделать резиновый или другой вариант

кроме того при уменьшении div wrapper width до 800 px все равно при уменьшении окна браузера блоки съезжают вниз - вопрос именно в том что сделать чтобы ликвидировать разъезжание блоков?

[stars]

ну как бы вам обьяснить вот допустим такой код

<div style="overflow: hidden;">
<div style=" width: 300px;float: left;"></div>
<div style=" width: 300px;float: left;"></div>
</div>

при рабочей облости браузера меньше 600px второй div сползет в низ, так как он уже не помещается однако если к style="overflow: scroll;" приписать width: 600px; не кто не куда уже не уползет(однако появятся полосы прокрутки)...

если же написать вот так

<div style="overflow: hidden;width: 100%;">
<div style=" width: 50%;float: left;"></div>
<div style=" width: 50%;float: left;"></div>
</div>

полос прокрутки не будет макет будет тянуться...

Edited April 30, 2010 by stars

[marsowy]

попробую воспользоваться советом и отпишусь что получилось, спасибо за ответ

[marsowy]

сделал как посоветовали, спасибо за совет посмотреть можно здесь: confiskatonline.ru