✔ Absolute größen, overflow:auto und springende divs

[Layna]

Hallo.
Meist verstehe ich CSS.. dieses mal nicht.
Ich habe folgenden aufbau:

      <div id="innerContent">
      	<div id="contentLeft">Hier k&ouml;nnen z.B. Bilder in einer Vorschau laufen.</div>
      	<div id="contentRight">   
      		<div id="textbox">
      			hier steht Blindtext.
      		</div>
	</div>
      </div>
	</div>

Dazu gehört folgendes CSS:

#outerBorder{
	width: 700px;
	position: relative;
	left: 50%;
	margin-left: -350px;
	top: 50px;
	background-color: #E6E6FA;
	border: 2px groove #D3D3D3;
}

#nav{
	height: 100px;
	text-align: center;
	padding-top: 15px;
	padding-left: 30px;
	padding-right: 30px;
}

#innerContent{
	height: 380px;
}

#contentLeft{
	position: relative;
	width: 200px;
	height: 380px;
	background-color: Black;
	float: left;
	overflow: scroll;
	color: #E6E6FA;
}

#contentRight{
	position: relative;
	top: 0px;
	margin-left: 200px;
	width: 500px;
	height: 380px;
	background-color: Blue;
	overflow: auto;
}

#textbox{
	padding-left: 20px;
}

Die Seite sieht auf diese Weise im IEauch aus wie sie soll (Angang 1).
Leider springt das rechte div im Firefox nach rechts... und zwar ein ganzes stück (Grafik 2).
Frage: warum?

 

[Maik]

Hi!

Ein interessantes Phänomen, denn eigentlich passt alles, doch sobald die overflow-Eigenschaft für die Klasse .contentRight ins Spiel kommt, springt die Box im Firefox um 200 Pixel nach rechts (= margin-left:200px).

Zu den Gründen kann ich leider nichts sagen, denn das seh ich heute wohl auch zum ersten Mal, so wie ich eben beim Reproduzieren des Anzeigefehlers gestaunt habe.

Zwei mögliche Gegenmaßnahmen hab ich aber parat, sofern du sie nicht schon selbst in der Schublade liegen hast.

1. Den angesprochenen margin-left-Wert auf null setzen.
2. Die rechte Box mit float:right ausrichten.

 

[Layna]

Ich war eigentlich der Meinugn alle margin/float kombis probiert zu haben... aber deine fehlte mir wohl noch, die passte nämlich .
Vielen Dank... meistens klappt CSS ja ganz toll mit gesundem Menschenverstand, aber das hier war wieder ein Fall... :suspekt:
Jedenfalls ist es jetzt hübsch .

Ciao!