CSS Abstand zwischen floatenden divs

[Velines]

Hi,

wie bekomme ich denn den markierten Abstand zwischen den beiden Kästen weg?
clear: none und display: inline habe ich schon versucht.. bin leider etwas eingerostet mit meinen CSS-Kenntnissen

body				{ background-color: white; color: black; font-family: Lucida Grande, Verdana, sans-serif; font-size: 12pt; }
div.feed			{ background-color: light-gray; -webkit-border-radius: 5px; border: 1px solid gray; padding: 5px; margin: 20px;
	float:left; width: auto; clear: none; display: inline-block; }

Danke und Grüße,
Velines

 

[1668mib]

Also wäre viellieicht hilfreich mehr Code zu posten...
Weil naja, du definierst da z.B. eine Hintergrund-Farbe mit "light-gray" aber ich sehe nichts, was hellgrau angezeigt wird...

 

[Velines]

Hab da ein wenig mit den Farben experimentiert.
Naja, hier ist mal ein statisches HTML.

 

[methical]

margin:20px dürfte für den großen abstand zwischen den boxen herbeiführen.

edit: achso, habe mir mal die html datei angeguckt, der riesenabstand kommt daher, dass der kasten mit den cb news so hoch ist und damit den content in der nächsten zeile runterdrückt
ich würde an deiner stelle statt mit width: auto mit einer festen breite arbeiten. wie hast du dir das ganze denn vorgestellt? vllt kann man gemeinsam ein funktionierendes css erarbeiten

 

[Velines]

Genau, Höhen der Kästen sind das Problem. Vorgestellt hatte ich mir das ganze so, dass die Kästen einfach "bunt zusammengewürfelt" sind, in einem n-Spalten-Layout. Damit meine ich folgendes: Auf meinem Notebook passt vielleicht nur ein Kasten von der Breite her hin, mein Rechner daheim kriegt zwei nebeneinander (so wie im Bild), und auf Arbeit hab ich vielleicht sogar 3 Spalten. Dafür würde ich ungern die Spaltenanzahl fix machen, sondern einfach nur den vertikalen Abstand einer Spalte unabhängig von der Anordnung der Boxen in den anderen Spalten.
Konkret: Bei der Situation im Bild soll die Box "fscklog" hochrutschen, so dass der "normale", im CSS definierte Abstand eingehalten wird. Direkt in der "Ecke" von heise und CB muss aber kein weiterer Kasten auftauchen; da reicht es, wenn er durch die Breite von heise bedingt weiter rechts beginnt.
Dass ich dann u.U. Platz in der Breite verschenke ist mir bewusst.

 

[methical]

Hm, ich denke mal dass das so nicht ohne weiteres möglich ist. Ich habe jetzt mal als Workaround dem feed container eine feste höhe gegeben (height:400px) und overflow: scroll gesetzt. So erreichst du den von dir gewünschten Effekt du musst halt nur mit Scrollbalken dann leben.
Die andere Lösung die mir in den Kopf kommt wäre eine dynamische Anordnung der einzelnen Kästchen per Javascript, aber ich weiß nicht ob das in deinem Sinne ist sowas per js zu lösen.

 

[Velines]

Mein nächster Versuch mit den CSS3-columns war leider auch nichts, weil das in den Browsern noch nicht gut gelöst ist (avoid break inside funktioniert nicht wirklich, Darstellungsfehler, ...)
Ich hab's jetzt so gelöst, dass ich 3 "große" divs habe, die mir die Spalten darstellen, und darin die einzelnen Feeds aufgelistet.
Jetzt habe ich halt immer 3 Spalten, aber scrollen hätte ich ja am Notebook eh gemusst.
Anbei ein Bild der aktuellen Version. Komplett per CSS, ohne Bilder und sonst was