3-Spalten-Layout / Moz vs. IE

[sipoh]

Guten Tag,

ich sitze gerade an einem 3-spaltigem Layout. Im IE wird das korrekt angezeigt (netrierte 3 Spalten, feste Breite)

Im Mozilla allerdings liegt die rechte spalte weiterer verschoben.

Kann mir jemand helfen?

/* ----------container zentriert das layout-------------- */
#topcontainer {
width: 800px;
height: 91px;
padding:0;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
} 


/* --------------left und right navigavtion------------- */
#topleft {
 width:30px;
 height: 91px;
 float:left;
 position:relative; 
 margin-left:0px;
 margin-right:0px;
 background-image: url(topleft.jpg);
}

 #topright {
 width:30px;
 height: 91px;
 float:right;
 position:relative; 
 margin-right:0px;
 margin-left:0px;
 background-image: url(topright.jpg);

 }

/* -----------------Inhalt--------------------- */ 
#topcenter{
position: relative;
width: 740px;
height: 91px;
margin: 0px;
float: none;
background-image: url(topcenter.jpg);

}

 

[Maik]

Hi,

versuch es mal hiermit:

#topleft {
 width:30px;
 height: 91px;
 float:left;
 position:relative;
 margin-left:0px;
 margin-right:0px !important;
 margin-right:-3px;
 background-image: url(topleft.jpg);
}

 #topright {
 width:30px;
 height: 91px;
 float:right;
 position:relative;
 margin-right:0px;
 margin-left:0px !important;
 margin-left:-3px;
 background-image: url(topright.jpg);

 }

/* -----------------Inhalt--------------------- */
#topcenter{
position: relative;
width: 740px;
height: 91px;
margin: 0px 30px !important;
margin:0 27px;
background-image: url(topcenter.jpg);
}

<div id="topcontainer">
     <div id="topleft"></div>
     <div id="topright"></div>
     <div id="topcenter"></div>
</div>

 

[sipoh]

Hm, korrekt. Vielen DANK!

 

[sipoh]

Ok, doch noch eine Frage:

Setze ich die Höhe im Container auf 100%, wachsen die "Inhaltslosen" DIVs nicht mit. Die linke und rechte Spalte verändern ihre Höhe nicht passig zum Inhalt, der in der mittleren Spalte steht. Sie bleiben gleich.

 

[Maik]

Schau dir hierfür mal die angehängten Beispiele in meinem CSS-Tutorial CSS-Layout mit 100%-Höhe an, in dem ich die Fauxcolumns-Technik angewendet habe.

 

[sipoh]

Ich habe dein Tutorial mal ausprobiert.

Das Problem:

Die Seite hat eine generelle Höhe von 100%, also Browser-füllend. Meine Frage bezog sich aber auf eine dynamische Höhe, abhängig vom Inhalt in der mittleren Spalte. also nicht generell 100 %.

Links und rechts ist eine Grafik von 30x1 px eingefügt, die nach unten hin wiederholt werden soll.

 

[Maik]

Du musst die beiden äußeren Hintergrundbilder in einer Grafik vereinen, die so breit wie das gesamte Layout ist (800*1px), und in einem übergeordneten Element als Hintergrundbild einsetzen, denn nur dann wachsen alle drei Spalten in der Höhe gleichmäßig.