Container wird auto. nach unten verschoben

[matibaski]

Moin!
Habe da ein Problem.

Ich baue eine Webseite (klar ;))
http://matibaski.paradoxe.de/Baskavoda

Diese Seite war ganz in Tabellen, nun in Containern.
Das Problem ist, dass es den rechten Container verschiebt.
Sind im mittleren Container 3 drin, mit float:left

Hier sind die Quelltexte:

<!--index.php-->
<div id="all">
 <div class="abstand"></div>
 <div class="top">
 </div>
 <div class="middle">
  <div class="left">
   <?php
    $site = $_GET['lang'];
    $lang = $_GET['lang'];
    includeLang($site, $lang);
    switch($site)
    {
     default: include("$lang/navig.php"); break;
     case 'navig' : include("$lang/navig.php"); break;
    }
   ?>
  </div>
  <div class="content">
   <?php
    $site = $_GET['site'];
    $lang = $_GET['lang'];
    includeLang($site, $lang);
    switch($site)
    {
     default: include("$lang/home.php"); break;
     case 'home' : include("$lang/home.php"); break;
     case 'zimmer' : include("$lang/zimmer.php"); break;
     case 'bilder' : include("$lang/bilder.php"); break;
     case 'baskavoda' : include("$lang/baskavoda.php"); break;
     case 'kontakt' : include("$lang/kontakt.php"); break;
     case 'ueberuns' : include("$lang/ueberuns.php"); break;
     case 'impressum' : include("$lang/impressum.php"); break;
    }
   ?>
  </div>
  <div class="right">
   <?php
    $site = $_GET['lang'];
    $lang = $_GET['lang'];
    includeLang($site, $lang);
    switch($site)
    {
     default: include("$lang/left.php"); break;
     case 'navig' : include("$lang/left.php"); break;
    }
   ?>
  </div>
 </div>
 <div class="bottom">
  
 </div>
</div>

Und der dazugehörige Stylesheet:

/* Container */

#all {
position:absolute;
top:0px;
left:0px;
width:100%;
height:575px;
text-align:center;
}

.abstand {
text-align:left;
width:915px;
height:10px;
}

.top {
text-align:left;
width:915px;
height:141px;
background-image:url(images/hr.png);
}

.middle {
text-align:left;
width:915px;
height:369px;
background-image:url(images/middle.png);
}

.left {
text-align:left;
float:left;
padding:5px;
width:168px;
height:100%;
}

.content {
text-align:left;
float:left;
padding:4px;
width:578px;
height:100%;
overflow:auto;
}

.right {
float:left;
text-align:left;
padding:5px;
width:160px;
height:100%;
}

.bottom {
clear:left;
text-align:center;
width:915px;
height:28px;
background-image:url(images/bottom.png);
}

Also bei .left beginnt float:left und bei dem Container untendran habe ich clear:left, dass nur diese drei oben nebenenander sind.

Doch wie gesagt, das 3. (.right) verschiebt es nach unten.
Liegt das an der Breite? Ich habe mit dem Taschenrechner die Breite schön eingeteilt.

Ich hoffe, ihr könnt mir hlefen.



MfG, matbaski

 

[prostel]

Alle 3 verschieben es nach unten, da die Höhen im Firefox leicht
anders interpretiert werden als im IE... Wenn du nicht komplett
umsteige willst, musste wohl ein wenig "rumhacken".
Von daher mache mal folgendes:

.left {
height:358px;
_height:369px;
}

.content {
height:358px;
_height:369px;
}

.right {
height:358px;
_height:369px;
}

Nehme deine Höhenangabe raus, und ersetze sie durch jeweils durch
diese beiden. _height wird nur vom IE interpretiert. Dann geht es

 

[matibaski]

Danke.

Nun habe ich dieses Problem:
http://matibaski.paradoxe.de/Baskavoda/

Unten macht er einen Abstand beim Bottom Container.
Kann das am overflow:auto liegen?



MfG, matibaski

 

[prostel]

Das ist genau das gleiche Problem wie vorher (dachte das meinst du).
Mit den von mir gepostet height Angaben rutscht der Bottom Container
wieder ran

 

[matibaski]

Uups... Hatte die Seite nicht aktualisiert.
Das rechte Content verschiebt es wieder nach unten.

Code jetzt:

.left {
text-align:left;
float:left;
padding:5px;
width:168px;
height:358px;
_height:369px;
}

.content {
text-align:left;
float:left;
padding:4px;
width:578px;
height:358px;
_height:369px;
overflow:auto;
}

.right {
float:left;
text-align:left;
padding:5px;
width:150px;
height:358px;
_height:369px;
}

Weiss nicht was falsch sein soll.


MFG, matibaski

 

[N43]

Abend,

die Angabe der Breite in der middle Klasse ist zu gering, deswegen bricht der automatisch um.


N43

 

[matibaski]

168px + 578px + 150px = 896px

Die Breite bei .middle ist 915px

An der Breite kann (muss nicht unbedingt sein) es nicht stimmen.
Aber ich werde da noch ein wenig ausprobieren.

MfG, matibaski

 

[N43]

Hallo,

168px + 578px + 150px = 896px

Die Breite bei .middle ist 915px

An der Breite kann (muss nicht unbedingt sein) es nicht stimmen.
Aber ich werde da noch ein wenig ausprobieren.

MfG, matibaski

hab's nochmal probiert. Der rechnet (zumindest der FF) die Padding-Angaben zur Breite mit. Dann sinds 896+10+8+10=924. Damit geht's dann wieder.


N43

 

[matibaski]

Stimmt die padding angaben.


MfG, matibaski