Witam.
Mam problem z layoutem na divach taki, że z nie wiadomych mi przyczyn dodaje się do któregoś diva kilkadziesiąt pixeli w height przez co mimo, że strona powinna się mieścić bez suwaka na monitorze gdzieś się rozjeżdża.

Na razie jak dla mnie najbardziej coś nie pasuje mi w div id="main_in" i w nim szukałem przyczyny, póki co bez skutku.

Wygląda to tak:
http://img526.imageshack.us/my.php?image=defektfv7.jpg

Kod strony:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=iso-8859-1" />
<title>Gamers Comunity</title>
<style type="text/css">
<!--
html, body {
     margin: 0px;
     padding: 0px;
     height: 100%;
}
body {
     background-color: #1e1e1e;
}
* html #main_box{height:100%;}/* ie6 and under*/
-->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
                <div id="main_center">
                 <div id="top_navigation"></div>
                 <div id="navigation"></div>
                   <div id="main_in">
                       <div id="left_in"></div>
                       <div id="right_in"></div>
                     <div id="center_in">
                          <div id="left_last">
                         <!-- NEWSY -->
                            <div id="news">
                              <div id="news_header">
                                 <div id="news_title">Tytuł nowego newsa</div>
                                 <div id="news_stopka">10.02.2009 nonameplum</div>
                              </div>
                              <div id="news_main">Tekts nowego newsa Tekts nowego newsa Tekts nowego newsa Tekts nowego newsa Tekts nowego newsa Tekts nowego newsa Tekts nowego newsa Tekts nowego newsa Tekts nowego newsa Tekts nowego
                             </div>
                              <div id="news_bottom"></div>
                           </div>
                      <!-- NEWSY -->
                       </div>
                       <div id="right_last"></div>
                       <div id="center_last"></div>                      
                     </div>
                     <div id="footer_in"></div>
                 </div>
             </div>
</body>
</html>


Styl CSS:
Kod
* {
     font-family: "Franklin Gothic Medium";
     margin: 0px;
     padding: 0px;
}
#main_center {
     width: 782px;
     margin-right: auto;
     margin-left: auto;
     height: 100%;
}
#top_navigation {
     background-image: url(../images/index2_03.png);
     background-repeat: no-repeat;
     height: 40px;
     width: 782px;
}
#navigation {
     background-image: url(../images/index2_05.png);
     height: 40px;
     width: 782px;
}
#main_in {
     width: 782px;
     height: 100%;
}
#left_in {
     background-image: url(../images/index2_07.png);
     background-repeat: repeat-y;
     float: left;
     width: 40px;
     height: 100%;
}
#right_in {
     background-image: url(../images/index2_11.png);
     background-repeat: repeat-y;
     width: 42px;
     float: right;
     height: 100%;
}
#footer_in {
     background-image: url(../images/index2_27.png);
     background-repeat: no-repeat;
     height: 48px;
     width: 782px;
     clear: both;
}
#center_in {
     width: 700px;
     height: 100%;
     float: left;
}

#left_last {
     float: left;
     width: 495px;
     background-image: url(../images/index2_25.png);
     background-repeat: repeat-y;
     height: 100%;
}
#news {
     width: 495px;
}
#news_header {
     background-image: url(../images/index2_08.png);
     height: 42px;
}
#news_title {
     font-size: 12px;
     color: #1F1F1F;
     text-align: center;
     height: 17px;
     padding-top: 4px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
}
#news_stopka {
     font-size: 10px;
     color: #8A8A8A;
     text-align: center;
     height: 21px;
}
#news_main {
     font-size: 12px;
     color: #1F1F1F;
     padding-top: 1px;
     padding-right: 20px;
     padding-bottom: 0px;
     padding-left: 25px;
     background-image: url(../images/index2_12.png);
}
#news_bottom {
     background-image: url(../images/index2_19.png);
     background-repeat: no-repeat;
     height: 15px;
}
#right_last {
     background-image: url(../images/index2_22.png);
     background-repeat: repeat-y;
     float: right;
     width: 180px;
     height: 100%;
}
#center_last {
     background-image: url(../images/index2_13.png);
     background-repeat: repeat-y;
     width: 25px;
     float: left;
     height: 100%;
}


Dla ułatwienia wyrzuciłem wszystkie 100% height. Przeczyściłem wpisy dla większej jasności w css.

Aktualnie stronka wygląda tak jak pod linkiem www.nonameplum.za.pl

Na ten stan rzeczy interesuje mnie jak przedłużyć background w widocznych brakujących miejscach: div'y: left_in, right_in, left_last, right_last, center_last.
Natomiast od samego początku chodziło i o to aby footer przylegał zawsze do końca okna przeglądarki okna a reszta backgrounda do niego się rozciągała. Tak jak wcześniej pokazałem prawie mi się udało ale nie mogłem wyeliminować pochodzących z pierwszych dwóch div'ów 80 pixeli.