Workarounds für float:both?

[Z€ddix]

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

[Gunnar Bittersmann]

@@Z€ddix:

nuqneH

Ich habe weiterhin mit display: inline-box; und float Kombinationen herum gespielt

Die Kombination ist unsinnig.

BTW, die Leerzeichen bei "float Kombinationen" und "herum gespielt" auch.

Qapla'

[Z€ddix]

Die Kombination ist unsinnig.

Gut, vielleicht hätte ich sagen sollen, ich habe mit verschiedenen display Eigenschaften herumgespielt in Kombinationen mit Floats(left,right,none), doch weitergeholfen hat mir das noch nicht.
Und deine Antwort ist auch nicht sonderlich hilfreich für die Lösung des Problems, zumindest sehe ich die Antwort nicht.

[Gunnar Bittersmann]

@@Z€ddix:

nuqneH

zumindest sehe ich die Antwort nicht.

Du weißt, was sich hinter Textpassagen verbirgt, die andersfarbig und unterstrichen sind und bei denen sich der Mauscursor ändert?

Qapla'

[Z€ddix]

Hey Gunner,

Du weißt, was sich hinter Textpassagen verbirgt, die andersfarbig und unterstrichen sind und bei denen sich der Mauscursor ändert?

Ja durchaus habe ich mir deinen Artikel durchgelesen, ist aus zugegebenermaßen gut und übersichtlich geschrieben, doch viel neues habe ich dadurch nicht erfahren.
Dein Artikel zeigt einige Möglichkeiten auf, wie man verschiedengroße Divboxen anordnen kann, doch sehe ich bei dir nur Beispiele, welche Lücken aufzeigen, jedoch keine mit verschiedengroßen Boxen, welche KEINE Lücken in der Anordnung aufzeigen. Doch genau ein Lückenloses Layout ist mein Ziel, und dieses müsste umzusetzen sein, solange die Boxen die gleiche Breite haben!

Ich kann es dir morgen auch noch kurz aufzeichnen, falls es damit klarer wird, doch hatte ich gehofft, dass ein Webdemonstation des Problems genug sein sollte.

Danke Z€ddix

[Gunnar Bittersmann]

@@Z€ddix:

nuqneH

Doch genau ein Lückenloses Layout ist mein Ziel

Das konnte ich deinem ursprünglichen Posting nicht entnehmen.

Auch der Umgang mit Whitespace ist meinem Artikel zu entnehmen.

Wenn du keine Lücken willst, notiere keine im Quelltext! Mein Artikel zeigt mehrere Möglichkeiten.

Ist natürlich alles unschön. CSS 3 bietet Möglichkeiten, auch Inline-Boxen mit Whitespace dazwischen lückenlos darzustellen. Die betreffenden Eigenschaften werden* aber von Browsern noch nicht oder unterschiedlich interpretiert.

Qapla'

* Zumindest wurden sie das zum Zeitpunkt des Artikels nicht. Wie man an der Erwähnung von Firefox 2 sieht, ist das schon eine Weile her. Wäre zu prüfen, ob sich das inzwischen gebessert hat.

[ChrisB]

Hi,

Auch der Umgang mit Whitespace ist meinem Artikel zu entnehmen.

Wenn du keine Lücken willst, notiere keine im Quelltext!

Es geht nicht um die horizontalen Lücken, sondern um die in der vertikalen, die bspw. auch in deinem Beispiel #4 zu sehen sind.
Hier hätte er wohl gerne, dass (wenn wir die dritte Spalte mal außer Acht lassen) die Box [4] unter die [1] nach oben rutscht, der höheren [2] zum Trotz.

MfG ChrisB

[Z€ddix]

Es geht nicht um die horizontalen Lücken, sondern um die in der vertikalen, die bspw. auch in deinem Beispiel #4 zu sehen sind.
Hier hätte er wohl gerne, dass (wenn wir die dritte Spalte mal außer Acht lassen) die Box [4] unter die [1] nach oben rutscht, der höheren [2] zum Trotz.

Ganz genau! Am liebsten natürlich nur mit CSS2 und HTML. Aber allen anschein nach gibt es wohl "nur" eine Javascript lösung. Danke

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Es geht nicht um die horizontalen Lücken, sondern um die in der vertikalen

Ah, jetzt habe ich es auch verstanden. Was eine vernünftige Problembeschreibung so alles bewirken kann … ;-)

Er möchte PARTITIONieren?

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Z€ddix!

Hat jemand eine Idee?

Spaltenlayout?

Matthias

[Z€ddix]

Om nah hoo pez nyeetz, Z€ddix!

Hat jemand eine Idee?

Spaltenlayout?

Matthias

Danke für die Idee. Ich wollte es möglichst verhindern die CSS3 Eigenschaft einzusetzten. Ich hatte zwar gelesen, das CSS3 eine extra für Spaltenlayout vorgesehende Eigenschaft hat, doch hoffe ich eine Lösung zu finden, die für die Mehrheit der Browser funktioniert.
Und dazu zählt leider auch der Internet Exporer...(welcher wieder meilenweit vom Standartkonformen Webbrowsen entfernt ist und nicht annähernd CSS3 unterstützt.).

Hast du noch andere Ideen?

Gruß Mathis

[Gunnar Bittersmann]

@@Z€ddix:

nuqneH

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

Der Container ist völlig überflüssig, es gibt bereits zwei derartige.

div.container {
width:    860px;

Auch das solltest du nicht tun.

Beides kannst du in hier und da nachlesen.

Qapla'

[molily]

Wenn ich dich richtig verstehe:
So etwas ist mit CSS alleine nicht möglich. Es gibt aber JavaScripte wie jQuery Masonry, die die Boxen optimal in einem Grid positionieren.
http://desandro.com/resources/jquery-masonry/

Mathias

[Z€ddix]

Wenn ich dich richtig verstehe:
So etwas ist mit CSS alleine nicht möglich. Es gibt aber JavaScripte wie jQuery Masonry, die die Boxen optimal in einem Grid positionieren.
http://desandro.com/resources/jquery-masonry/

Mathias

Vielen dank! Das ist genau das was ich suche! Schade das ich Javascript einsetzen muss, eigentlich hatte ich gehofft nur sehr wenig auf der Website einsetzen zu müssen.
Danke
Z€ddix