CODEWITHSUNDEEP
cssoverflowmultiple-columnsmyspace
user2041416
user2041416

Reputation: 21

How do you make the text flow like the new my space article pages?

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

Upvotes: 2

Views: 180

Answers (1)

R A
R A

Reputation: 119

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.

Upvotes: 0

Related Questions