1

On my website I have a few blocks with info from different sites being generated dynamically, resulting in me not being able/wanting to control the order in which those blocks appear. Now I'd like them to stack up in either the left or the right column, depending on where there is space.

To clarify, I drew up what it looks like and what I'd like it to look like, but the website won't let me post them, so I hope my description is clear enough (if not, the images are

78R5d https://i.stack.imgur.com/78R5d.png

and

T51aP https://i.stack.imgur.com/T51aP.png

the way it is now, when the boxes in the right column are slightly higher in total than the boxes on the left, a new box will appear on the left, but with some whitespace above it to compensate for the height difference. It'd be great if boxes on the right wouldn't block those on the left.

Now, I'm afraid this won't be possible without adding some specific classes to each box, but you never know what clever solutions people might come up with :)

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Vincent
  • 4,876
  • 3
  • 44
  • 55
  • Of course, _after_ I posted this question I did find [similar](http://stackoverflow.com/questions/5106578/position-floated-elements-directly-under-each-other) [questions](http://stackoverflow.com/questions/5015406/css-alignment-question/5015497). It appears nobody knew of a pure CSS question, but that it could be fixed in Javascript using the jQuery plugin [Masonry](http://masonry.desandro.com/). Suppose I'll have to try that. – Vincent Jul 23 '11 at 19:59
  • [This answer](http://stackoverflow.com/questions/6378524/float-variable-height-containers/6378690#6378690) sums it up nicely. – thirtydot Jul 23 '11 at 20:04
  • I did just now also look into new possibilities provided by CSS 3, and found [flexbox](http://www.html5rocks.com/en/tutorials/flexbox/quick/), but that doesn't seem to solve the problem (just in case someone else comes across this problem and considers looking into flexbox). – Vincent Jul 23 '11 at 20:23

3 Answers3

1

There are several solutions to this problem that use Javascript for layout. One of them is Masonry, which is a jQuery plugin. You just need to do some basic CSS:

.item {
    float: left;
    width: 200px;
}

And then something like this:

$('#container').masonry({
    itemSelector : '.item',
    columnWidth : 240
});

Of course the options you would use might be different.

Wylie
  • 1,054
  • 2
  • 12
  • 20
0

You should separate the articles into two divs, otherwise you will get the white space. Float two divs side-by-side and alternate filling them with the dynamic blocks.

<div class="column1">
    <article id="1">
    <article id="3">
</div>
<div class="column2">
    <article id="2">
    <article id="4">
</div>
b01
  • 4,076
  • 2
  • 30
  • 30
0

After some more research, I found a CSS 3 property called column-width or column-count that can solve this. This is currently supported in most browsers that are not IE, though Gecko- and WebKit-based browsers need to use the prefixes -moz- and -webkit- respectively.

I haven't figured out yet how to get it to display perfectly. In Chromium boxes can be cut halfway in the left column, and continued in the right, which isn't great for my site. Unfortunately, WebKit doesn't support break-inside yet, and -webkit-column-break-inside doesn't do the trick either. In Firefox, I can fix this by setting a fixed width and floating the boxes to the left, but this really breaks things in Chromium.

So, not a perfect solution, but at least you could do browser sniffing or in some cases even graceful degradation to at least make it look a bit better in Gecko.

Vincent
  • 4,876
  • 3
  • 44
  • 55