Spalten immer nebeneinander auch wenn Fenster zu schmal?

[ralph]

Eine Seite ist per CSS in einem Drei-Spalten Layout geschrieben.
Wie bekomme ich das hin, dass egal wie klein die Fensterbreite wird, die Boxen immer nebeneinander stehen?
Im Tabellen Layout bekomme ich das hin, aber da gibts andere Probleme...

Meine Versuche bislang:

3 Spalten Layout mit float-right und float-left für die äußeren Spalten:
Setze ich die float-right box im Quellcode ganz oben und das Browserfenster wird zu klein, wandert die rechte Float Box über die mittlere Spalte und deren Inhalt springt nach unten.
Sortiere ich die float box im Quellcode nach unten, erscheint die Box generell rechts unterhalb des Inhalts der mittleren Box statt oben rechts daneben. Mit position absolute top:0px haut das mit dem floaten nicht hin.

  
<div style="width:100px; border:2px black solid; float:right">  
  Textspalte Rechts:<br>  
</div>  
  
<div style="width:100px; float:left; border:2px black solid">  
  Textspalte links  
</div>  
  
<div style="min-width:420px; border:3px red solid; padding:10px; margin:0 120px 0 120px">  
  Text + Bilder Mitte<br>Text<br>Text>		  
</div>  

Als 2 Spalten Layout, die rechte dann nochmals als 2 Spalten geteilt, also verschachtelten div Boxen scheitert es daran, dass ich der rechten Box ein left margin zuweisen muß, das geht aber nicht, da die Spaltenbreite der mittleren variabel sein soll. Ohne Margin erscheint der Text der rechten Spalte unter der mittleren Box statt rechts daneben.

  
<div style="width:100px; float:left; border:2px red solid">  
	Text-links oben  
</div>  
  
<div style="border:2px blue solid; margin: 0 0 0 100px; height:100%; padding:10px">  
Verschachtelte Box: <br>  
  
	<div style="min-width:420px; float:left; border:3px red solid; padding:10px">  
		Text Mitte<br>  
		<img src="xx.jpg" width="400px">  
	</div>  
  
	<div style="width:100px; border:2px black solid">  
		Text Rechts:<br>  
		<img src="xx.jpg" width="100px">  
	</div>  
  
</div>  

[Beat]

Eine Seite ist per CSS in einem Drei-Spalten Layout geschrieben.
Wie bekomme ich das hin, dass egal wie klein die Fensterbreite wird, die Boxen immer nebeneinander stehen?

Indem du die Elemente html und body so stylst, dass sie deiner Vorstellung von minimaler erforderlicher Breite entgegenkommen.

mfg Beat

[ralph]

Genial. Manchmal ist die Lösung so einfach. Danke!!
Schade, dass der IE6 mit min-width nix anfangen kann, hoffen wir mal, der stirbt bald aus.

[Kalle_B]

Schade, dass der IE6 mit min-width nix anfangen kann, hoffen wir mal, der stirbt bald aus.

Den IE6 musst du ja _ständig_ mit dem Holzhammer bearbeiten, damit er einigermaßen spurt.

Auch hier die Holzhammer-Methode: Nimm irgendein image in den Container auf (gerne ein tranparentes), gebe ihm deine gewünschte Mindestbreite und eine Höhe von 1px. Nun kann auch der IE6 nicht mehr unter diese Breite rutschen.

Kalle

[Kalle_B]

Wie bekomme ich das hin, dass egal wie klein die Fensterbreite wird, die Boxen immer nebeneinander stehen?

Warum ist das so attraktiv? Du erzwingst dann doch - zu dem wahrscheinlich vorhandenen vertikalen noch einen horizontalen Scrollbalken.

Wer will sich denn durch so eine Seite durcharbeiten? Sympathiepunkte: -10

Ich habe auf einigen Seiten ein zweispaltiges Layout:
<div class=lft>
</div>
<div class=rgt>
</div>

Solange ich per CSS die Klassen lft und rgt nicht definiere, sind die divs nicht neben- sondern übereinander.

Nun kann ich mit Javascript direkt hinter dem body- tag die Fensterbreite ermitteln und wenn ausreichend, eine CSS- Datei nachladen, die lft und rgt definiert.

z.B. hier

Lade die Seite mal mit Festerbreite über 50 em und mache das Fenster deutlich kleiner. Die beiden Spalten sehen nebeneinander besch... aus.

Nun lade die Seite im kleinen Fenster nochmal und - simsalabim - sieht es ganz anders aus.

Kalle

[Ralph]

Die Methode mit dem Java ist elegant, aber wieviele User skalieren das Fenster neu und laden dann natürlich nicht neu.

Warum das unbedingt nebeneinander stehen muß? Stell Dir einfach ein Urlaubsfoto vor. Meinst Du das sieht gut aus, wenn Du das in drei Streifen schneidest und die untereinander legst? Alles eine Frage der Optik. Die rechte Spalte ist unwichtig, die kann, wenn das Fenster zu klein ist gerne aus dem Bild fallen. Die mittlere ist wichtig. Wenn die nach unten rutscht ist das Blödsinn.

Ich möchte den Link zu der Seite hier nicht posten, ist ein Seite mit privaten Fotos.

[ChrisB]

Hi,

Die Methode mit dem Java ist elegant

Von Java hat überhaupt keiner geredet.

Warum das unbedingt nebeneinander stehen muß? Stell Dir einfach ein Urlaubsfoto vor. Meinst Du das sieht gut aus, wenn Du das in drei Streifen schneidest und die untereinander legst?

*Ein* Bild in mehrere Streifen zu zerlegen, wäre in diesem Falle schon die Startidiotie, die das Problem verursacht.

MfG ChrisB