Full Page Horizontal Scroll Content

I’ve been trying to find something close to what I’m trying to achieve and I can’t seem to find anything else close to it. I’ve attached a quick image of what I’m trying to do:

enter image description here

Read More

Basically I am trying to create a horizontal scrolling site where when the content hits the bottom of the page, it starts a new column and continues. I’m currently building a WordPress theme where I would want this to be the single template. Does anyone have any idea where to begin on creating something like this? I’d appreciate any help!

Related posts

Leave a Reply

1 comment

  1. If you’re not limited to CSS2 you can use columns in CSS3 to achieve this effect. Set fixed column widths but not fixed column totals (documentation)

    .content {
      -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
      -moz-column-gap: 60px; /* Firefox */
      column-gap: 60px;
    
      -webkit-column-width: 300px; /* Chrome, Safari, Opera */
      column-width: 300px;
    }
    

    Example: http://codepen.io/anon/pen/pJogEZ