Z€ddix: Workarounds für float:both?

Beitrag lesen

Hey there,
ich bin im Moment auf einer Suche nach einer Art float für beide Seiten.
Grundsätzlich geht es um folgendes:
Ich erstellen mit PHP verscheidene boxen, welche alle die gleiche Breite haben, aber unterschiedliche Höhen, dem Inhalt angemessen. Da der Inhalt jeder Box variablel ist, lässt sich die Höhe nur schwer voraussagen.

Jetzt sollen diese Boxen in einen zweispaligen Layout angeordnet werden. Und das so kompakt wie möglich.

Dazu habe ich einen Container erstellt, der beide spalten umschließen soll:

  
div.container {  
	width:    860px;  
	margin:   10px auto;  
	overflow: hidden;  
}

Und dann natürlich die Klasse für die einzelnen Boxen:

  
	div.container table.box {  
		margin:       5px;  
		width:        415px;  
		table-layout: fixed;  
		overflow:     hidden;  
		border:       3px outset #808080;  
		float:        left;  
	}  
}

Die Idee war, das maximal zwei Boxen nebeneinander passen, und durch den float in die zweite "Spalte" wandern.
Dies klappt auch wunderbar, solange nicht eine Box auf der linken Seite kleiner ist, als eine auf der rechten. Sobald eine kleiner ist, entsteht eine unerwünschte Lücke auf der linken Seite. In diesem Fall müsste es also einen float: right; geben. Da ich aber nicht weiß, welche Box wann auf welcher Seite ist, müsste es einen float: both; geben.

Hier habe ich einmal eine Beispielwebseite erstellt:
http://www.nacouncil.org/box/test.html

Hat jemand eine Idee zu einem Workaround?
Ich habe weiterhin mit display: inline-box; und float Kombinationen herum gespielt, doch Nichts gefunden was mein Problem löst.

Hat jemand eine Idee?

Danke,
   Z€ddix