2

I'm trying to create a multi-column layout that wraps the text vertically as well as horizontally like this: https://new.myspace.com/discover/trending/2013/01/23/jeremy-allen-white-cant-get-away-from-sex

I can't seem to find any article that can help me.

This is what I have in my stylesheet, but the text in each column wraps around before reaching the bottom of the browser.

Here is what it currently looks like: http://jsfiddle.net/koryeast/ztfED/

@media (min-width:800px)
{
    div
    {
        -webkit-column-fill: auto;
        -webkit-column-width: 300px;
        -webkit-column-gap: 40px;
    }
}

But as you can see the text in each column wraps around before reaching the bottom of the browser.

How can I make the text overflow to the next column only when it reaches the bottom of the browser?

Any help would be appreciated!

Thanks

user2041416
  • 21
  • 2
  • Please post a bit more code. Put a small snippet up at http://jsfiddle.net that demonstrates the problem you are having. – gilly3 Feb 05 '13 at 00:30

1 Answers1

0

I have found a tutorial to do this. Go to http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/ . This explains it all. Also, a similar question with a working version can be found here re-arange default column (-webkit-column, -moz-column) order on a page?. Hope this helps.

Community
  • 1
  • 1
R A
  • 119
  • 1
  • 12