Home/ Questions/Q 8334117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T03:14:38+00:00

I have several divs on a page that all have the same width but

  • 0

I have several divs on a page that all have the same width but different heights. They are all in one div, the #note1PreviewDiv. They all share the class .note, which has the following css code (among other):

.note{
    width: 160px;
    padding: 10px;
    margin: 10px;
    background: #e3f0ff;
    float: left;
}

I thought with float: left; they would all automatically align so that they are well aligned among each other.

Here’s a preview of what it looks like:

Current state http://posti.sh/img/ist.png

And here’s what the positioning should be like:

Desired state http://posti.sh/img/soll.png

I think you get the idea. Somehow it seems to me the height of the leftmost div pushes the other divs in the second row to the right – but that’s only guessing.

Thanks for your help!

Charles

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re not going to be able to do this easily with CSS only.

    CSS3 has a new feature called column layout, but browser support is not great. IE9 and below don’t support it.

    See http://designshack.net/articles/css/masonry/ and the last example for CSS3 solution.

    Have a look at these js / jQuery options for easier implementation and browser support:

    • 0