Flow text Horizontally

Question

As we all know, text goes from top to bottom regardless if you you have a fixed height, unless you turn the overflow to hidden. I was wondering if there is a way to have the text go from vertical to horizontal. Something like having a big MS word opened in a big screen and you can see the first page on the left side and the second page on the right side. I would like to achieve that same effect in a website I am planning.

Thanks.

Take a look on this page http://www.html5rocks.com/en/tutorials/flexbox/quick/ about halfway down. — xception, Oct 12 '12 at 03:31

MLM · Accepted Answer · 2012-10-12T03:20:27.167

CSS Regions could be a great help here but as of today they are work in progress and have very little browser support.

But what you could use is column-count and column-gap

Here is a fiddle I whipped up: http://jsfiddle.net/MadLittleMods/wpTX7/

Here is some css to split it into columns horizontally within the 200px height.

#overflow_horizontal 
{
    height: 200px;
    overflow: scroll;

    -moz-column-count: 2;
    -moz-column-gap: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 24px;
    column-count: 2;
    column-gap: 24px;
}

Edit:

Here is a fallback. jsFiddle: http://jsfiddle.net/MadLittleMods/SEDaQ/

The fiddle does work but not on IE9 because it doesn't like text/plain resources. If you can get me a static link for Columnizer I can update the fiddle and it will work just fine.

Add Modernizr and Columnizer.

Add this jQuery(change # columns to whatever you need):

$('.no-csscolumns > #overflow_horizontal').columnize({ 
    columns: 3
});

@MrA I am trying to make something with [Modernizr](http://modernizr.com/) and [Columnizer](http://welcome.totheinter.net/columnizer-jquery-plugin/) — MLM, Oct 12 '12 at 02:47

score 0 · Answer 2 · answered Oct 12 '12 at 02:15

0

1 . Insert -> Break -> Section break (Next page section break).

2 . File -> Page Setup -> set landscape

answered Oct 12 '12 at 02:15

Jeff Bootsholz

2,971
15
70
141

I mean for web page. Thanks for the thought thou. – Mr A Oct 12 '12 at 02:22

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

I'm not sure why you would want to do that, it doesn't sound like a functional web page, but if you just set the element width to say, 10000px and overflow to auto you will be able to let the text run off the side of the screen.

http://jsfiddle.net/NHD2e/

there's also this question: Continuing overflowed text in a different div?

edited May 23 '17 at 11:56

Community

1
1

answered Oct 12 '12 at 02:15

Scott Hillson

900
1
12
30

I am going for a windows 8 feel, or something similar to the new MySpace approach but not that extreme. – Mr A Oct 12 '12 at 02:26
That makes sense. You could also use a set of divs and float them all to the left, clearing the float each time you want to drive down, see step 9 here : http://www.barelyfitz.com/screencast/html-training/css/positioning/ – Scott Hillson Oct 12 '12 at 03:21

Flow text Horizontally

3 Answers3