Split vertically and horizontally
Is there a way to position the div like this:
|----------||----------||----------||----------|
| div1 || div5 || || div10 |
|----------||----------|| div7 ||----------|
| div2 || || || div11 |
|----------|| div6 ||----------||----------|
| div3 || || div8 || div12 |
|----------|| ||----------||----------|
| div4 || || div9 || div13 |
|----------||----------||----------||----------|
So what I would like to do is have a horizontally expanding layout that does not scroll vertically, it just fills it with the space it has vertically and then moves horizontally. So the first element goes to the top right, the second one below it, the third one until there is no free space and then comes back on top (like div5).
source to share
This is the vertical equivalent of how floated elements flow horizontally in the container (as if supported float:top
).
As @MarcB pointed out, it will be easy to deal with CSS3 columns in the future . The standard is not yet fully defined, but might look something like this:
.container {
height: 200px;
column-width: 100px;
column-gap: 10px;
column-fill: auto;
}
At the same time, the jQuery plugin might be the best choice. For example, jQuery Masonry has one column formatting that might do the trick. There might be simpler jQuery plugins out there that would be adequate as well.
Related search terms: jQuery, CSS columns, multi-column layout, split layout, tiled layout
source to share