Forums

infocentre

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

cpj238

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.

infocentre

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

harkonenn

Alex, have you seen this: Columnizer jQuery Plugin.

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

infocentre

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

Thanks again!

shadowmason

Thank you, works great!

chrisburton

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

AdamC

It probably would. Damn shame it is barely supported by any browser. http://caniuse.com/css-regions

treehouse : what would you like to learn today?

Forums

Two Column text flow