Positionierung von DIV-Elementen

[Lapskaus]

Wie der Titel schon sagt, habe ich ein Problem mit der Positionierung von einigen DIV Elementen. Die Seite ist wie folgt aufgebaut:

<div id='main'>   
     
  <div id='menu_right'>
      "Menü Inhalt"
  </div>

  <div id='content'>
    <div id='pathway_container'>
      "Titelzeile"
    </div>
     "Inhalt2"
   </div>

</div>

Die dazugehörigen CSS Codes:

#main {
	background: #FFFFFF;
	width: 830px;	
        margin: auto;
}
#content {
	text-align: justify;
	padding: 8px 198px 8px 8px;
	font-size: 0.9em;
        min-height:450px;
}
#pathway_container {
	border-bottom: 1px solid #D8D8D8;
	margin: 0px 5px 5px 5px;
	padding: 5px 0px 5px 0px;
}
#menu_right {
        float: right;
	width: 180px;
	background: #F7F7F7;
	min-height: 150px;
	padding: 5px;
	text-align: left;
}
#menu_right ul{
	margin: 0px;
	padding: 0px;
}
#menu_right li{
	list-style: none;
}
#menu_right table.moduletable {
	width: 180px;
	border:	1px solid #D8D8D8;
	margin-bottom: 5px;
	background: #F7F7F7;
}
#menu_right table.moduletable th{
	color: #FFFFFF;
	width: 100%;
	border: 1px solid #b72323;
	background: url(xxx);
	padding: 2px 5px 3px 5px;
}
#menu_right table.moduletable td{
	width: 100%;
	padding: 2px 5px 3px 5px;
	padding: 2px;
}
#menu_right table.moduletable td a{
	width: 160px;
	font-weight: bold;
	display: block;
	padding: 2px 5px 2px 5px;
}
#menu_right table.moduletable td a:hover{	
	color: white;
	border: 1px solid #D599A0;
	background: #A22019;
	padding: 1px 4px 1px 4px;
}

So und jetzt zum Problem.
Im Firefox wird alles Korrekt dargestellt, im IE leider nicht.

Der Content wird zwar links neben, aber auch gleichzeitig unter dem Menu dargestellt. Soll heissen, er geht zwar unter das Menu, aber in der Breite passt er eigentlich daneben.
An der Breite des Inhalts liegt es also nicht.
Wenn ich jetzt dem Inhalt eine absolute Positionierung von oben zuweise, wird zwar in beiden Browsern alles an die richtige Stelle gesetzt, aber der Main Container ändert leider nicht mehr seine Höhe bei "zuviel" inhalt.
Ich hoffe man kann mir da schnell helfen, steh etwas unter Druck.

 

[Maik]

Ich hab den gezeigten Quellcode im IE 6.0 überprüft und kann das von dir beschriebene Problem nicht feststellen.

 

[Lapskaus]

Wenns nich da wär würd ic keine Hilfe brauchen
Mir ist auch gerade erst was aufgefallen. Und zwar benutze ich Joomla und da gibt es die Möglichkeit sich im Browser , auf der eigentlichen Homepage in einen internen Bereich einzuloggen und Änderungen an der Homepage direkt im Browser vorzunehmen. Und das Problem tritt nur auf wenn die von Joomla bereitgestellten Editierfenter erscheinen. Vielleicht kennt sich ja jemand damit aus und weiss Rat.

Hier nochmal eine Grafik als "Beweis"

 

[Maik]

Ich glaube dir ja, daß es bei dir Darstellungsprobleme im IE gibt. Aber dann muß der Grund an einer anderen Stelle zu suchen sein, denn mit deinem geposteten Quellcode-Schnipsel sieht's bei mir derzeit so aus:

 

[Lapskaus]

Myteriöser Weise kann man das Problem auch umkehren
Wenn ich zuerst den Content container Lade, diesem Float left zuweise und die Float right Anweisung aus dem Menu Container lösche, wird im IE alles korrekt angezeigt, im Firefox allerdigns nicht ...

Gibt es eine Möglichkeit innerhalb der CSS datei zu definieren das beim IEE dieser Teil der CSS datei und beim Firefox jender geladen wird ?

 

[Maik]

Grundsätzlich bieten die Conditional Comments die Möglichkeit, eine CSS-Browserweiche für den IE zu setzen:

<link rel="stylesheet" type="text/css" href="layout.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="layout_ie.css">
<![endif]-->

Nur müsstest du sie dann auch im HTML-Code einsetzen, um die entgegengesetzte Reihenfolge der DIVs festzulegen.

Ziemlich umständlich, wie ich finde.

Poste mal den vollständigen HTML-Code, dann kann ich später schauen, wie sich das Problem anderweitig lösen lässt. Denn derzeit stellen bei mir beide Browser den gezeigten Quelltext-Ausschnitt einheitlich fehlerfrei dar.