Question

I would like to dynamic position divs horizontally and vertically with the same widths and different heights depending on the width of theirs container.

DEMO HERE

I would like to stack them like

| 1 | 2 |

| 3 | 4 |

| 5 |

the problem is there is white gap between divs.
Even if I add clear 1st and 5th on the left

DEMO HERE

I still get gaps.

Is it possible to achieve that with css ?

EDIT:

Container width may change (i.e. if user drag its border). Then divs inside should align correctly to occupy whole space inside. Possible results below:

| 1 |

| 2 |

| 3 |

| 4 |

| 5 |

or

| 1 | 2 | 3 |

| 4 | 5 |

or

| 1 | 2 | 3 | 4 |

| 5 |

or

| 1 | 2 | 3 | 4 | 5 |

Answer 1

If you want to use only CSS I think the best for you is to set two columns. In the first column you’ll put 1, 3 and 5 and in the second column 2 and 4. That way won’t be any white spaces.

EDIT:
If you want to stack those divs without white spaces and still have a flexible layout you can’t do it just in CSS but you can try with Isotope a jQuery plugin that is really easy to use.