Problem z float w dwóch divach obok siebie

[VuQ]

Witajcie

Mam niestandardowy problem z float w dwóch div-ach obok siebie.

Sytuacja wygląda tak jak na tym obrazku:



Czyli w div-ie A float-ują się left div-y A1 - A4, a w div-ie B float-ują się left div-y B1 - B12.

Chciałbym uzyskać taką sytuację jak na obrazku poniżej:



Czyli chciałbym div-y B1, B4, B7, B10 float-owały się do div-ów A1, A2, A3, A4. Nie mogę głównych div-ów A i B ułożyć w inny sposób.

Wiecie jak to zrobić?

Dzięki za pomoc.

VuQ

[mateo]

Albo pobaw się z ujemnymi marginesami lub olej podział na A i B.

[VuQ]

Tak się nie da niestety zrobić. Div-y B1 - B12 zawarte w div-ie B są float: left. Aby zrobić tak jak piszesz musiałbym rozpoznać każdy pierwszy z lewej i takiemu dać margines, a to przy float nie jest możliwe. Dodatkowo div-y A1 - A4 mają losową szerokość.

[Marys]

A te A i B to jakieś tło, a A1-4 i B1-B12 to treść?

[Kartofelek]

mateo ma rację.
Albo w lewo albo w prawo. W obie strony nie da się iść, chyba że się rozerwiesz.

"Aby zrobić tak jak piszesz musiałbym rozpoznać każdy pierwszy z lewej i takiemu dać margines, a to przy float nie jest możliwe."
Że jak? A kolega nth-child() to używał kiedyś? Poza tym istnieją przecież klasy itp.