układ divów jak tekst w gazecie - jak uzyskać?

[Ace]

Witam,

Chciałbym ułożyć taki zestaw divów:

Kod:

<div id="zielony"></div>
<div id="czerwony"></div>
<div id="zolty"></div>

w sposób taki jak na obrazku:



Niestety przy zastosowaniu standardowego float:left; osiągam taki efekt:



Zdaję sobie sprawę, że dodając dodatkowe divy reprezentujące kolumny mogę uzyskać pożądany wygląd, ale wtedy pisząc kod html będę musiał decydować w której kolumnie dany box powinien się znaleźć, a na to nie mogę sobie pozwolić. Chciałbym, aby po prostu każdy box spływał nie tylko w lewo, ale i do góry. Wszystkie divy mają taką samą szerokość, ale różne (nieznane na etapie generowania htmla) wysokości. Czy ktoś ma pomysł jak osiągnąć to o czym piszę za pomocą css (w ostateczności java script/jquery)? Z góry dziękuję za wszelką pomoc

[szym]

Poczytaj o "clear"

[mateo]

Zrób div lewi i prawy z float left, następnie do diva left wrzucasz zielony i żółty a do prawego czerwony.

[Ace]

Zrób div lewi i prawy z float left, następnie do diva left wrzucasz zielony i żółty a do prawego czerwony.

W swoim poście zaznaczyłem, że zdaję sobie sprawę z istnienia takiego rozwiązania, ale nie mogę go zastosować.

Zdaję sobie sprawę, że dodając dodatkowe divy reprezentujące kolumny mogę uzyskać pożądany wygląd, ale wtedy pisząc kod html będę musiał decydować w której kolumnie dany box powinien się znaleźć, a na to nie mogę sobie pozwolić.

W boxach o których wspominam będą prezentowane aktualności. Moduł, który nimi zarządza nie odpowiada za ich prezentację - ma jedynie wypisać ich listę, a wyglądem niech zajmie się css.

Poczytaj o "clear"

Wydaje mi się, że potrafię poprawnie stosować właściwość clear, ale nie widzę w jaki sposób miałaby pomóc mi rozwiązać problem. Możesz napisać coś więcej?

[szym]

http://kurs.browsehappy.pl/CSS/Float przeczytaj sobie tego linka.
ustaw clear:right dla float:right itp.

daj linka do strony albo wklej kod http://jsfiddle.net/ jak masz możliwość.

[Ace]

Chodzi o tę stronę http://obronca.com.pl/ i aktualności znajdujące się w jej prawym dolnym rogu. Widać, że pomiędzy aktualnością z datą 13.12.2011 i tą z datą 06.02.2010 powstał odstęp wynikający z długości aktualności 01.02.2011 i temu chcę zapobiec.

[Engine]

A nie sądzisz, że taki układ kolejności artykułów jest zły. Z przyzwyczajenia czytam od góry do dołu i przechodzę do następnej kolumny w które jest zapewne ciąg dalszy.
---
Spróbuj artykułom dać float left, ale co drugiemu dać float right.
---
Widzę, że treść aktualności jest prezentowana na osobnych podstronach, to nie lepiej na stronie głównej dać tylko fragment artykułu i ucinać go po np. 200 znakach i dać "czytaj dalej".

[Kartofelek]

http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/