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?

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

/* ----------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);   }

Hi,

versuch es mal hiermit:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

#topleft {  width:30px;  height: 91px;  float:left;  position:relative;  margin-left:0px;  [b]margin-right:0px !important;  margin-right:-3px;[/b]  background-image: url(topleft.jpg); }    #topright {  width:30px;  height: 91px;  float:right;  position:relative;  margin-right:0px;  [b]margin-left:0px !important;  margin-left:-3px;[/b]  background-image: url(topright.jpg);    }   /* -----------------Inhalt--------------------- */ #topcenter{ position: relative; width: 740px; height: 91px; [b]margin: 0px 30px !important; margin:0 27px;[/b] background-image: url(topcenter.jpg); }

Code :

1 2 3 4 5

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

Hm, korrekt. Vielen DANK!

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.

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.

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.

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.