Grow your CSS skills. Land your dream job.

Responsive multi column text with CSS / Fallback

  • # February 26, 2013 at 1:43 pm

    My goal is to have a long text with headlines in a multi column layout. So that it can flow from one column into the next like in print magazines.
    But as the project is gonna be responsive, I should be able to switch between the number of columns all the way down to just one, depending on media queries.

    I already found [this article on css-tricks](http://css-tricks.com/snippets/css/multiple-columns/) and the js fallback on [A List Apart](http://alistapart.com/article/css3multicolumn) but the last one doesn’t really seem to work for me (Chrome on Win7).

    Any ideas for a good solution on that, perfect would be browser support down to IE8, IE9 would also be ok. Maybe a js fallback but I’d prefer CSS-only.

    # February 26, 2013 at 2:08 pm

    I have no idea why the JS fallback would not work in Chrome….I can’t think of any reason why it shouldn’t.

    Do you have a link?

    CSS only just isn’t going to work below IE9 (possibly IE10).

    # February 26, 2013 at 2:31 pm

    Here are the [examples](http://www.csscripting.com/css-multi-column/example1.php) provided in the ALA-article. It shows up in columns, but not every time. Sometimes I have to reload the page before the JS fires up. Doesn’t seem very reliable.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".