Creating the horizontal scroling newspaper style multicolumn html

Question

I am creating the text reader app for windows metro app( somthing like bing news) with the webview as container. But the problem I am facing is how to divide the text/html content in multiple columns with horizontal scrolling? I tried using html-css with column-count tag. But if text contents is overflowing than it will create the vertical scrolling html with columns as per the width of the screen.

Is there a way to do it with html/css/javascript?

Answer 1

Demo

html

<div class="reading-canvas">
    <h2>This is heading</h2>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>Another heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>More heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>Heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>Heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>    
    <hr/>
</div>

css

    body {
        font-family: sans-serif;
        line-height: 1.5;
        background: whitesmoke;
        margin:0;
        padding:0;
    }
    h1, h2, h3, h4, h5, p {
        margin-top: 0;
        margin-bottom: 32px;
        margin-bottom: 2rem;
    }
    .reading-canvas {
        padding: 1.6em;
        -webkit-column-width: 15em;
        -moz-column-width: 15em;
        column-width: 15em;
        -webkit-column-gap: 2rem;
        -moz-column-gap: 2rem;
        column-gap: 2rem;
        max-width: none;
        height: 90vh;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .reading-canvas p:last-child {
        margin-bottom:0
    }