3 Spaltiges Design, mit Problem mit der rechten Spalte

[Raimund]

Ich möchte drei Spalten auf meienr Internetseite haben. Ich habe erst versucht das mit zwei zu machen, was auch funktionsfähig ist.

  
.container {  
	padding: 20px;  
	border: 1px solid #000;  
	}  
  
.left {  
	float:left;  
	width:200px;  
	background:#000;  
	height:100px;  
	}  
  
.middle {  
	margin-left:200px;  
	height:500px;  
	display:block;  
	background:#FF0000;  
	}

<div class="container">  
<div class="left">  
1  
</div>  
<div class="middle">  
2  
</div>  
</div>

Danach habe ich versucht eine dritte rechte Spalte einzufügen:

.middle {  
	margin-left:200px;  
        margin-right:200px;  
	height:500px;  
	display:block;  
	background:#FF0000;  
	}  
  
.right {  
	float:right;  
	margin-right:200px;  
	width:200px;  
	height:100px;  
	background:#000;  
	}

Doch diese Spalte ist jetzt nicht rechts, sondern unterhalb der middle Spalte. Wie kann ich es bewerkstelligen das die right Spalte rechts ist und die middle Spalte sich dann der grösse des Bildschirmes anpasst!

[T-Rex]

Also wichtig ist erstmal das für die rechte Spalte genug Platz vorhanden ist, sonst rutscht diese immer ein Stockwerk tiefer.
Wenn genug Platz vorhanden ist, gibt es zwei Möglichkeiten. Entweder die Reinfolge der HTML Knoten ist recht, links, mitte - dann funktioniert das float right. Oder sie ist link, mitte, rechts - dann funktioniert ein float left der rechten spalte.
Alternativ kannst du allen Blöcken ein display: inline-block geben. Dann kannst du dir das float komplett sparen.

Gruß
Gunnar Ersatzmann
T-Rex