0

Trying to do something strange here for a blog type site. Site will be horizontal scrolling. Also looking to make it mobile responsive.

What I am trying to do is make it so each blog post (title,text,images) is 100% height, auto width. I want my content to fill up the height of the viewport, and then overflowing content will begin a new column until it all fits within the chunk of the post which then scrolls horizontal.

I have been reading today about css implementation of columns and I believe I am probably going to need some JS to get this to work the way I want it to, but not really sure where to start as JS isn't really my forte.

I am attaching a basic photo to demonstrate what I mean. I believe the solution may be something along the line of getting the viewport height, applying that to the post height, setting the column to 100%, calculating how much content can fit into that column and then dynamically creating and filling content boxes as needed. Somewhat hard to explain so look at the photo.

enter image description here

Would love to hear any suggestions, thanks!

zoranc
  • 2,410
  • 1
  • 21
  • 34
A BOY n HIS PIG
  • 23
  • 3
  • I could see this working, except it doesn't really account for photos or other content, only text strings, something similar to this maybe http://jsfiddle.net/U79Kg/ – A BOY n HIS PIG Mar 11 '14 at 18:33
  • Here is someone trying to do something similar, it looks for scrollbars and then slices up the content into divs from there, this is very close to what I'm looking for but I don't want any scrollbars and the divs must be height 100% http://jsfiddle.net/Tt9sw/2/ – A BOY n HIS PIG Mar 11 '14 at 18:47
  • this guys answer is basically what I am after, he offers a bit of help but not a ton: http://stackoverflow.com/questions/14028126/how-to-create-new-div-when-the-content-is-is-overflowing-past-the-fixed-height-o – A BOY n HIS PIG Mar 11 '14 at 19:55

1 Answers1

0

take a parent div give width:1200%;

now give the child div width and height = 100%; and float = left,

now write your javascript code for transition.

also write media queries to handle different screen size 1024,768,640,480,320

check this plugin it might help in your cause http://www.idangero.us/sliders/swiper/

XciA
  • 338
  • 2
  • 10
  • This is good advice for building the horizontal aspect of things but right now I am really focusing on the columns since that is the major pain. – A BOY n HIS PIG Mar 11 '14 at 18:47