Implementing a multicolumn layout with independant row heights

Question

I am trying to create a layout similar to what the new Google+ layout and similar to this question (but using html).

Currently Google+ uses 1 div for each column. I am trying to see if there would be another way to do this.

Possibly the flexbox model of CSS3 would help but the compatibility level of it is ... meh.

I tried the inline-block model but going this way create rows that are not independent on each other's height.

There are existing solutions, but everything requires IE10+ or IE11+. I would need a solution that is IE7+ compatible. I don't see anything beside the div per column.

Has anybody had the occasion of doing something similar?

do you mean something like this: http://dev.w3.org/csswg/css-multicol/ — argentum47, May 17 '13 at 00:00
@blackbee yes, that represents more what I'm trying to do. But it's not IE7 compatible. — Erick, May 17 '13 at 00:40
If you have specific requirements, they need to be in the question. There's nothing you can do for a browser that old and broken unless you're open to using JavaScript. — cimmanon, May 17 '13 at 11:04

score 0 · Answer 1 · answered May 17 '13 at 00:01

0

The CSS multi-column layout module can do what you're looking for.

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 30em; /* desired number of columns and/or width of column */
}

Prefixes may be necessary. http://caniuse.com/#feat=multicolumn

answered May 17 '13 at 00:01

cimmanon

67,211
17
165
171

Implementing a multicolumn layout with independant row heights

1 Answers1