3 Spalten Layout und Tabelle mit 100% macht Probleme

Status
Nicht offen für weitere Antworten.

fanste

Erfahrenes Mitglied
Hi,

Ich habe mir ein 3-Spalten-Layout gebastelt. In der mittleren Spalte gibt es eine Tabelle, die 100% Breite hat. Im FF ist das kein Problem. Doch der IE zickt mal wieder rum. Er denkt nun, dass er die Breite vom Browserfenster nehmen soll und nicht die, die er in dem Div zur Verfügung hat.

Das Layout sieht vereinfacht so aus.

HTML:
<!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></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif, "Times New Roman";
color: #000077;
}


div.wrapper {
width: 100%;
min-height: 100%;
margin: 0 auto;
background: url(Bilder/left.gif) repeat-y;
min-width: 790px;
background-color: #E6E6FF;
}

* html div.wrapper { /* Für IE */
height: 100%;
}

div.header {
width: 100%;
height: 148px;
background-image:url(Bilder/header.jpg);
background-position:right;
background-repeat:no-repeat;
background-color: #ddddff;
}


div.leftCol {
width: 180px;
float: left;
padding: 0;
background-color: #ddddff;
}

div.rightCol {
width: 150px;
float: right;
padding: 10px 10px 0 0;
font-size: 10pt;

}

div.centerCol {
margin: 10px 170px 21px 190px;
position:relative
}

div.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0em;
font-size: 0;
}

div.footer {
width: 100%;
margin: -18px auto 0 auto;
padding: 1px 0 0 0;
height: 17px;
background: #ddddff;
text-align: center;
font-size: 9pt;
color: #000077;
}

-->
</style>


            <div class="wrapper">
                 <div class="header">
                      header     
                 </div>
                 <div class="leftCol">
                      leftCol  
                 </div>
                 <div class="rightCol">
                      rightCol
                 </div>
                 <div class="centerCol">
                      <table width="100%">
                          <tr>
                              <td>Ein Inhalt</td>
                          </tr>
                      </table>
                      
                 </div>
                 <div class="clear">&nbsp;</div>
            </div>
            <div class="footer">footer</div>
    
</body>
</html>
Und hier noch ein Link, damit man sich von dem ganzen mal ein Bild machen kann: http://fadz.uttx.net/minis/phpbb2/index.php

Ich hoffe, dass ihr mir sagen könnt, warum der IE das so macht und ob man das beheben kann, außer das ganze auf Tabellen umstellen zu müssen.
 
Wenn ich die position:relative-Eigenschaft für das DIV .centerCol entferne, stellt auch der IE 6.0 die Tabelle korrekt dar.

Einziger Haken: die Tabelle beginnt erst unterhalb der äußeren Spalte und wandert bei zunehmenden Inhalt in der linken oder rechten Spalte nach unten.

Lösungsvorschlag:

Code:
div.centerCol table {
float: left;
}
 
Hi,

möglich wäre auch eine Höhenangabe von einem Prozent für den IE im mittleren Container. Damit kann das
Microsoftprodukt das Element korrekt neben den gefloateten darstellen.
Code:
* html div.centerCol{ height: 1%;}

Ausserdem solltest Du dem clear-Element eine minimale Schriftgrösse von einem Pixel geben, da es
sonst zu Fehldarstellungen z.B. im Mozilla oder Netscape kommt.

Ciao
Quaese
 
Danke für die schnellen Antworten. Deine Lösung, Quaese, hat funktioniert. Bei der von michaelsinterface hat sich nur der mittlere Container nach Links verschoben, mehr nicht. Auch wird die Tabelle nicht richtig dargestellt, wenn ich das "position:relative;" weglasse.

Aber es funktioniert nun. Danke für eure Bemühungen.
 
Status
Nicht offen für weitere Antworten.
Zurück