Hallo liebe TP-CSS-Profis,
ich habe ein PRoblem wie im Titel schon beschrieben hiermit:
IE6 Geisterabstand zwischen 2 gefloateten Containern
Das Online-Beispiel gibt es hier:
IE6 Geisterabstand zwischen 2 gefloateten Containern
Das HTML/CSS stammt aus einer Dreamweaver-Vorlage welche ich nur geringfügig im CSS abgeändert habe.
Original-CSS:
HTML-Code:
.twoColFixLtHdr #sidebar1 {
float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
width: 200px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px; /* Durch den linken Rand dieses div-Elements entsteht die Spalte am linken Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
}
Modifiziertes-CSS:
HTML-Code:
.twoColFixLtHdr #sidebar1 {
float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
width: 200px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
padding: 15px 10px 15px 20px;
border: 1px solid blue;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 232px; /* Durch den linken Rand dieses div-Elements entsteht die Spalte am linken Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
border: 1px solid red;
}
Es geht um den Sidebar und den Content-Container, diese sollten sich nahtlos aneinander schmiegen auch im IE
Ich habe dafür bis jetzt keine Lösung gefunden *haareausrauf*
.
