2-Spalten mit float:left

[C64]

Hallo zusammen,

ich suche schon eine ganze Weile nach einer Lösung für ein gutes 2-Spalten-Layout wie es auf dem Bild "Zielform" zu sehen ist.

Mir ist klar, dass float:left logischerweise die divs so darstellt wie auf dem Bild "Aktuell". Aber ich suche irgendeinen Trick für das Layout "Zielform".
Das Problem ist, dass die divs aus einer Datenbank gelesen werden und unterschiedlich lang sind. In die Datenbank werden dann immer mal wieder neue divs reinkommen bzw. alte rausfallen. Daher kann ich auch nicht einfach sagen, ich mache zwei Spalten-divs nebeneinander und lasse dann erst die linke und dann die rechte Spalte füllen. Macht wenig Sinn

Kennt irgendjemand einen workaround oder hat eine Idee, wie ich das evtl. anders lösen könnte?

Edit: Der letzte div darf natürlich auch rechts liegen, weil er ja noch an einen anderen Div anstoßen würde... der ist mir aber relativ egal, ob links oder rechts

 

[Nathea]

Vielleicht hilft Dir das: Klick

 

[C64]

Leider nicht.
Er hat hier dann ne feste Größe und ne klare Aufteilung was links und rechts in den Div kommt.
Bei mir sollen sich alle Artikel gleichmäßig auf beide Spalten aufteilen, so dass beide Spalten in etwa gleich lang sind. Deshalb kann ich nicht einfach per php jeden ungeraden Beitrag links und jeden geraden rechts reinschieben, weil evtl. sonst eine Spalte sehr lang ist und die andere nicht so lang (aufgrund der unterschiedlichen Beitragslänge).
Ich glaube inzwischen, es gibt dafür keine einfache Lösung
Vielleicht muss ich es doch komplett anders umsetzen...

Hab jetzt so viel CO2 produziert, weil ich so viele verschiedene Formulierungen an Google geschickt hab. Ne Lösung hab ich aber leider nicht gefunden...

 

[Salzi]

naja die Aufteilung welche links und welche rechts kommt kannst du ja quasi auch berechnen. Sortiere dein Content nach Zeichenanzahl (php - strlen). Anschliessend kannst du ja eine Funktion schreiben, welche ermittelt wie der Content am besten ausgegeben werden soll. Das ganze funktioniert natürlich nur, wenn dein Content reinen Text enthält. Sobald irgendwelcher Code (HTML, BB-Code usw.) drin ist, kannst du natürlich nicht auf die Anzahl Zeichen gehen (ausser du würdest die noch explizit aussortieren).

Gruss

 

[C64]

Gut, das wäre dann schon echt kompliziert, da gelegentlich auch Bilder drin sind Die müsste ich dann auch noch mit einberechnen lassen (und das kann ich ehrlich gesagt auch nicht und würde mir zu lange dauern, bis ich mich darüber belesen habe ).
Ich löse es anders, wenn nicht noch irgendwer eine CSS-Möglichkeit sieht

 

[Salzi]

Bilder sind doch noch viel einfacher zu rechnen als Text. Einfach per getimagesize die Grösser ermitteln und schon hast du sogar eine Angabe in Pixel wie hoch das Ding ist.

<?php
$img = "/pfad/zum/Bild/bild.jpg";
$size = getimagesize( $img);
echo "Bildbreite: " . $size[0];
echo "Bildhöhe: " . $size[1];
?>

 

[Macropolis]

Schau Dir mal das CSS-Framework YAML an. Da solltest Du fündig werden.

HTH,

Macropolis

 

[Kowalski]

Mit JavaScript oder Java müsste das doch zu regeln sein.

 

[Oregano]

Mal daran gedacht zwei Spalten zu machen und in jeder der zwei Spalten die Elemente nicht zu floaten? Dann musst du nur vorher jedem Element sagen ob es sich links oder rechts einreihen soll. Ist auf jeden Fall weniger aufwändig und führt im Endeffekt, rein Visuell zum selben Ergebnis.

 

[maery]

ich bin damit immer sehr gut gefahren: http://960.gs/ oder natürlich auch mit yaml, wobei man bei letzterem denke ich mehr einarbeitungszeit braucht.

liebe grüße

 

[C64]

Mal daran gedacht zwei Spalten zu machen und in jeder der zwei Spalten die Elemente nicht zu floaten? Dann musst du nur vorher jedem Element sagen ob es sich links oder rechts einreihen soll. Ist auf jeden Fall weniger aufwändig und führt im Endeffekt, rein Visuell zum selben Ergebnis.

Ähm, ja
Und dann hab ich das Problem, dass ich eben die Höhe der einzelnen Einträge vorher berechnen muss, um die optimale Verteilung der Container auf beide Spalten zu bekommen. Ob ich in den Spalten dann floate oder nicht ist ja relativ egal
Aber danke

@maery: Ich weiß zwar gerade nicht, wie mir dein Link bei meinem Problem helfen soll, aber generell sieht die Seite interessant aus Werde ich auf jeden Fall mal durchschauen!

 

[mschoening]

@maery: 960gs ist nicht um Layouts in CSS zu erstellen sondern um das eigentliche Layout in einem Raster anzuordnen !

@C64: Hier findest du bestimmt Lösungsansätze: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

 

[C64]

@maery: 960gs ist nicht um Layouts in CSS zu erstellen sondern um das eigentliche Layout in einem Raster anzuordnen !

@C64: Hier findest du bestimmt Lösungsansätze: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

Ich liebe smashingmagazine.com

Den Artikel hatte ich allerdings noch gar nicht wahrgenommen - danke dir für den Link!

Werde ihn mir auch auf jeden Fall mal zu Gemüte führen, selbst wenn er mir bei meinem konkreten Problem nicht helfen sollte
Aber jetzt erst mal lesen und dann weiterschauen

Edit: Na no. 4 "jQuery Masonry" schaut doch auf den ersten Blick schon mal in etwa so aus, als ob es mir konkret helfen könnte Heut abend wird gecoded

 

[mschoening]

Masonry meinte ich auch !

LG und viel Glück,
Max

 

[klausimausi]

ich bin damit immer sehr gut gefahren: http://960.gs/ oder natürlich auch mit yaml, wobei man bei letzterem denke ich mehr einarbeitungszeit braucht.

liebe grüße

Hey, vielen Dank für den Link zu 960! Ist ja höchst cool.
Und da ein kleines Redesign meiner Site eh ansteht,
auch eine prima Inspiration


Gruß

Klaus

 

[maery]

dann habe ich den falschen link kopiert. sorry.

edit: also ich hab es mir noch mal angesehen, aber über das verlinkte grid könnte man schon darauf hin abzielen, die css so anzulegen, dass die grids/kästen in einer angenehmen und vor allem ordentlichen art und weise über der seite verteilt sind - das ist ja genau das wohin die frage will, auch wenn ich jetzt nicht unbedingt das float problem anspreche.

ich finde diese (grid) lösung(en) manchmal sauberer, als mit float zu arbeiten (da gibt es ja verschiedene varianten von). denn bei den floats schleichen sich immer gerne schnell fehler ein und man hängt und arbeitet dann die meiste zeit nur an selbigen.

die fluid variante mit java script integration ist auch sehr ansprechend. http://www.designinfluences.com/fluid960gs/12/

und by the way: das ist auch in css. aber danke für den netten hinweis.
[denkt] männer, püh [/denkt]

 

[C64]

Masonry meinte ich auch !

LG und viel Glück,
Max

So, es ist 100%ig das, was ich gesucht habe
Nur mag es meine Bilder nicht so recht, obwohl ich die Höhe explizit inline angegeben habe. Da werde ich heute abend wohl noch mal mit nem einfachen Beispiel starten müssen, ob es generell klappt, um es danach erst in meine Seite zu implementieren.
Auf jeden Fall perfekt, weil ich sowieso jQuery einsetze und liebe

 

[mschoening]

Ich hab nicht gesagt das 960 Systeme schlecht sind. Ganz im Gegenteil, finde sie selbst genial und verwende die verlinkte Seite auch! Der Gedanke hinter diesen Grids ist aber nicht das CSS zu generieren als Template sondern um das eigentliche Layout besser zu strukturieren.

ich finde diese (grid) lösung(en) manchmal sauberer, als mit float zu arbeiten (da gibt es ja verschiedene varianten von). denn bei den floats schleichen sich immer gerne schnell fehler ein und man hängt und arbeitet dann die meiste zeit nur an selbigen.

Die Stylesheets die du hier generieren kannst verwenden auch floats...

.grid_1,
.grid_2 {
	display:inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

@C64 Freue mich, dass ich helfen konnte...

LG,
Max