Is it possible to have "wrap" / stick / flow variable separators floating towards each other?
I am trying to align a list of divs to 2 columns that are of different heights by floating towards each other. If each block size is fixed, they will naturally stack neatly with each other, however, due to the different heights, for taller blocks, the adjacent block will have a lot of free space at the bottom before moving on to the next block.
However, I noticed that this only happens on one side, if the blocks float to the left, then the right column blocks will automatically fill in any gaps and vice versa.
However, I am now trying to find a solution to achieve fluidity for both sides.
You can see an example of what I mean here .
Everything in the 2nd column is well matched, but there are plenty of spaces on the left for taller sizes.
The CSS looks like this:
.container {
width: 600px;
}
.item {
width: 250px;
height: auto;
background: darkgray;
border: 1px solid black;
float: left;
margin: 5px 0 0 5px;
padding: 5px;
}
source to share
You have 3 options that have disadvantages.
-
Write a JavaScript solution that calculates each element starting at position and then one, respectively, using relative positioning.
-
Change your markup to have two container columns that are opposite floats. You will need to distribute items between the two programmatically.
- Use a table so that each element's height matches the one next to it.
Obviously, the last two don't sound very semantically, and the first one might not be practical depending on how large the list of items can be. I believe there is a way to do this in CSS 3, but it does not support the browser at the moment.
source to share