Liquid design: Problem bei hoher Bildschirmauflösung

[Mark]

Hallo,

ich habe eine Seite erstellt, die sich an die Bildschirmauflösung anpassen soll. Im Prinzip ist das eine Box mit dem Inhalt und einer rechts "gefloateten" Seitenleiste. Der Box mit dem Inhalt ist keine feste Breite zugewiesen. Damit nun die Zeilen bei hoher Bildschirmauflösung nicht so lang werden (die Bildschirme werden ja immer größer, und die Leute surfen trotzdem noch oft mit maximaler Fenstergröße), beschränke ich sie mit max-width:

  
#inhalt  
 {  
  margin:30px 240px 50px 0px;  
  padding:0px 30px 0px 30px;  
  max-width:700px;  
 }  
  
#seitenleiste  
 {  
  float:right;  
  margin: 30px 30px 30px 0px;  
  padding:0px;  
  width:210px;  
 }  

Nun tritt allerdings bei hoher Auflösung (bzw. großem Browserfenster) der Effekt auf, dass die Seitenleiste nicht richtig um den Inhalt "fließt", sondern am rechten rand "klebt", zur Veranschaulichung zwei Screenshots:

So ist es...

...aber so hätte ich es gerne:

Hier noch die Original-Seite: http://procosara.org/index_de

Woran liegt das und wie kann man das ändern?

Danke & Grüße
Mark

[Abstaubaer]

Also mit meinen schwer beschränkten kenntnissen würde ich sagen, dass du bei der rechten navigation einfach mal align=left machen solltest.

Float bedeutet nicht das das Teil mit Float um etwas fließt sondern, dass um das Teil mit Float etwas anderes fließt, aber auch das wäre nicht was du willst.

[Mark]

Hallo,

Also mit meinen schwer beschränkten kenntnissen würde ich sagen, dass du bei der rechten navigation einfach mal align=left machen solltest.

also in CSS gibt's ja nur text-align. Und damit geht's leider nicht.

Float bedeutet nicht das das Teil mit Float um etwas fließt sondern, dass um das Teil mit Float etwas anderes fließt, aber auch das wäre nicht was du willst.

Immerhin werden die beiden Container schon mal nebeneinander dargestellt, nur hätte ich sie eben noch gerne direkt aneinander.

Mark

[DeWitt]

Woran liegt das und wie kann man das ändern?

Ich würde sagen, dass die Seitenleiste einfach -wie es sich gehört- am rechten Rand ihres Eltern-Elements platziert wird, und das ist dir wohl das BODY-Element.

Mein Vorschlag wäre, die beiden Elemente in einen DIV-Container zu setzen und diesem dann eine max-width von 910px zu geben.

[Mark]

Hallo DeWitt,

Mein Vorschlag wäre, die beiden Elemente in einen DIV-Container zu setzen und diesem dann eine max-width von 910px zu geben.

Ja, das ist eine Idee - Danke für den Tipp!

Mark