CODEWITHSUNDEEP
csspositionpositioningcss-float
Vincent
Vincent

Reputation: 5425

How do I get boxes on my website to stack up in two columns?

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.sstatic.net/78R5d.png

and

T51aP https://i.sstatic.net/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 :)

Upvotes: 1

Views: 116

Answers (3)

Vincent
Vincent

Reputation: 5425

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.

Upvotes: 0

b01
b01

Reputation: 4384

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>

Upvotes: 0

Wylie
Wylie

Reputation: 1064

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.

Upvotes: 1

Related Questions