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>