Grow your CSS skills. Land your dream job.

Two Column text flow

  • # December 9, 2010 at 10:23 am

    Hello guys.

    I would like to pick you’re brains as to whether there is a way to have two columns with fixed height and width with text flowing between the two.

    Example: I have a online magazine (physically displayed like an open book with two pages on view) and it is run on wordpress. So, i want to allow the editor to write content into the content box of WP and have that text flow between two columns.

    The more i look into it, the harder it seems!

    Cheers guys
    Alex

    # December 9, 2010 at 10:28 am

    You can do this with CSS3 pretty easily with vendor prefixes for modern browsers…but as far as IE6/7/8/9 are concerned…well you’re out of luck with CSS3.

    #magazine {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    }

    There could be a Javascript or JQuery plugin out there that might accomplish the effect you want, but then again I don’t know, never tried looking for one.

    # December 10, 2010 at 7:05 am

    Thanks for the advice! Really it needs to compatible between most browsers (at least the IE included!)

    I have tried looking for a jQuery fix, but nothing seems to be out there…

    Thanks
    Alex

    # December 23, 2010 at 12:10 am

    Alex, have you seen this: Columnizer jQuery Plugin.

    Perhaps it might be the solution, or at least lead you in the right direction…

    # January 10, 2011 at 5:00 am

    Thank you! That looks perfect – just about to have a proper play around with it.

    Thanks again!

    # January 7, 2013 at 10:29 pm

    Thank you, works great!

    # January 7, 2013 at 10:40 pm

    Won’t CSS regions be a perfect solution for this?

    # January 8, 2013 at 8:53 am

    It probably would. Damn shame it is barely supported by any browser.

    http://caniuse.com/css-regions

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

You must be logged in to reply to this topic.

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