Problem beim Ausrichten von <div>

[Daniel]

Hi!

Vielleicht kann mir hier jemand bei folgendem Problem helfen. Ich habe eine Seite in der links eine Navigation und rechts ein Fenster für die Inhalte steht. Beide Bereiche sind mit CSS formatierten <div> realisiert. Der Bereich für die Inhalte soll sich der Fenstergrösse des Browsers anpassen, d.h. der Inhaltsbereich soll auch volle Breite haben wenn die eigentlichen Inhalte nicht über volle Breite gehen (ich hoffe das war einigermassen verständlich). Wenn die Inhalte z.B. über eine Breite von 200px gehen soll der Inhaltsbereich trotzdem z.B. 600px breit sein (je nach Grösse des Browserfensters).
Mozilla und Opera machen auch alles so wie es gedacht war nur der IE macht mal wieder Probleme. Der IE zeigt den Inhaltsbereich nur so breit an wie die Inhalte.
Hier noch meine CSS Formatierungen:

div.links { position:absolute; top:55px; left:10px; width:135px; height:250px; background:#BBBBBB; font:12px Verdana,Helvetica,Arial;border:2px solid #BB0000; }

div.links a { display:block; text-align:center; font:bold 11px Verdana,Helvetica,Arial;padding:5px; margin:0 0 2px 0px; border-width:0px;text-decoration:none; color:#0000DD; background:#999999;border-right:5px solid #999999; border-left:5px solid #999999; }

div.links a:hover { color:#DD0000; background:#EEEEEE; border-right:5px double #BB0000; border-left:5px double #BB0000; }

div.content { position:absolute; top:55px; left:155px; right:10px;
color:#000000; background:#EEEEEE;font:12px Verdana,Helvetica,Arial;
padding:5px; border:2px solid #BB0000; }

Und hier der betreffende HTML-Code:
<div class="links">
 <a href="css-test.html">Link 1</a>
 <a href="css-test.html">Link 2</a>
 <a href="css-test.html">Link 3</a>
 <a href="css-test.html">Link 4</a>
 <a href="css-test.html">Link 5</a>
 <a href="css-test.html">Link 6</a>
 <a href="css-test.html">Link 7</a>
 <a href="css-test.html">Link 8</a>
</div>

<div class="content">
 Testzeile 1
 <p>
  Testzeile in Absatz 1
 </p>
  Testzeile 2
 <p>
  Testzeile in Absatz 2
 </p>
 <p>
  Testzeile in Absatz 3
 </p>
</div>

Breitenangaben wie width:100% bringen auch nichts da dann bei allen Browsern der Inhaltbereich über den rechten Rand des Browserfensters hinaus geht.

Gruss
Daniel

[Zeromancer]

Hallo Daniel,

div.content { position:absolute; top:55px; left:155px; right:10px;
color:#000000; background:#EEEEEE;font:12px Verdana,Helvetica,Arial;
padding:5px; border:2px solid #BB0000; }

Breitenangaben wie width:100% bringen auch nichts da dann bei allen Browsern der Inhaltbereich über den rechten Rand des Browserfensters hinaus geht.

Dann setze doch die Weite nicht auf 100%, sondern auf 90%. Ich würde weiterhin versuchen, das/den <div> nur links und oben absolute zu positionieren.

MfG

André

[Thomas J.]

Tag auch

Dann setze doch die Weite nicht auf 100%, sondern auf 90%.

Dieser Vorschlag ist unbrauchbar, weil ein Schuß in's Blaue.
Wieviel ist 90% + 155px?

Eine Alternative wäre, den div per margin zu platzieren (margin: 55px 10px 0px 155px). Ich habe im Moment allerdings keinen IE zur Hand, um das zu testen.

Thomas J.

[Daniel]

Hallo!

Eine Alternative wäre, den div per margin zu platzieren (margin: 55px 10px 0px 155px). Ich habe im Moment allerdings keinen IE zur Hand, um das zu testen.

Funktioniert im Opera und im IE. Dummerweise zickt jetzt bei mir der Mozilla rum und meint die Angabe zu margin-top nicht beachten zu müssen. Sieht aus als wenn er sich der Mozilla an der absoluten Positionierung der Navigation verschluckt. Nehme ich die Navigation raus kennt er wieder margin-top.
Muss wohl noch 'ne Zeit probieren bis ich endlich eine zufriedenstellende Lösung gefunden habe. Trotzdem danke für deine Tip. Ich frage mich wieso nicht auch selbst auf margin gekommen bin.

Gruss
Daniel

[Daniel]

Hallo!

Dann setze doch die Weite nicht auf 100%, sondern auf 90%. Ich würde weiterhin versuchen, das/den <div> nur links und oben absolute zu positionieren.

Bringt nichts. Wenn ich 90% nehme und das Fenster verkleinere dann geht der Bereich wieder über den rechten Rand hinaus. Genauer gesagt geht der Inhaltsbereich 155px über den rechten Rand hinaus. Beim absoluten Positionieren wird der Bereich 155px vom linken Rand entfernt positioniert. Durch die Angabe von 90% (oder what ever) nimmt der Browser 90% der Fensterbreite für den Inhaltsbereich. Soweit so gut. Aber durch die 155px vom linken Rand verschiebt sich jetzt alles 155px nach rechts. Damit geht der Bereich über den rechten Rand hinaus.

Das rechte absolute Positionieren hab ich nur gemacht weil Mozilla und Opera den Inhaltsbereich dann immer der Grösse des Browserfensters anpassen, ohne das dieser Bereich über den rechten Rand hinaus geht. Wenn der IE (genauer der IE 5) das auch so machen würde wäre ich glücklich aber der weigert sich.

Gruss
Daniel

[TorstenA]

Hallo,

Bringt nichts. Wenn ich 90% nehme und das Fenster verkleinere dann geht der Bereich wieder über den rechten Rand hinaus.

Logisch, denn die Seitenbreite ist nur dann "optimal", wenn 10% des Anzeigebereichs 155px und mehr sind, also dürfte deine Seite bei width:90% nur ab einer Breite von 1.550px gut aussehen :-)

Die nach meiner Meinung beste Lösung ist, auch für den linken Container eine relative Breite anzugeben, also bspw. 20%. Alternativ könntest du mit min-width arbeiten, aber ich glaube mich zu erinnern, dass der IE damit Schwierigkeiten hat.

Hoffe es hilft
Torsten

[Daniel]

Hi,

ich bin's nochmal. Ich hab jetzt anscheindend die Lösung zu meinem Problem. Zum einem hab ich mir eine neuere Version vom Mozilla installiert (hatte noch die antike Version 1.1 auf dem Rechner) und zum anderen hab ich Angaben zu position:absolute und margin kombiniert:

div.content { position:relative; top:55px; margin: 0px 10px 0px 155px;
color:#000000; background:#EEEEEE; font:12px Verdana,Helvetica,Arial;
padding:5px; border:2px solid #BB0000; }

Damit schaut es jetzt auf dem IE5, Mozilla 1.5 und Opera 7.1 gleich aus. Wenn das jetzt auch noch auf andere Versionen (Opera < 6.1 und Mozilla > 1.1) funktioniert bin ich zufrieden.

Gruss
Daniel

[Detlef G.]

Hallo

Auf den mir zur Verfügung stehenden Browsern (IE 6, N6, N7, Moz 1.4, Op 6) verhält sich folgende Variante fast identisch:

body {margin-top:55px;margin-left:10px;}

div.links {float:left; width:135px; height:250px; ...

div.content { margin-left:145px; color:#000000; ...

Lediglich N 4 kommt nicht so ganz damit klar.

Detlef