iBooks-like Layout with Light CSS/JS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

I was watching ol’ Dave Rupert play around with horizontal layouts in CodePen the other day. He found something that I wasn’t aware of. A CSS trick, if you will.

When you’re using CSS columns, and you set the column-count, say, to 2. The content will be split up into 2 columns in the visible area. It doesn’t mean only two columns period. If the content overflows that element (easy to do if you have a fixed height), more columns will be created horizontally. Plus you can make that overflow scroll.

See the Pen wBpYGm by Chris Coyier (@chriscoyier) on CodePen.

When I saw that I was like woah just like iBooks! Two columns. Scrollbar along the bottom.

Just a little styling and we could make it just like that. We can even use the entire browser window to do it.

* {
  box-sizing: border-box;
html {
  height: 100%;
body {
  height: 100%;
  padding: 2em;
  font-family: 'Gentium Basic', serif;
  column-count: 2;
  column-gap: 4em;

Dave also messed around with paginating it easily. Click the right half of screen, scroll over 2 columns (the width of the screen). Click the left half of the screen, scroll back.

var scrollLeft = function() {
  window.scrollTo(window.scrollX - window.innerWidth, 0);

var scrollRight = function() {
  window.scrollTo(window.scrollX + window.innerWidth, 0);

document.body.addEventListener('click', function(e) {
  if (e.clientX > (window.innerWidth / 2)) {
  } else {

See the Pen The Hounds of Baskerville by Chris Coyier (@chriscoyier) on CodePen.

I’m sure y’all smarties out there could make it even cooler with like snap-to-scrolling (so you don’t get in-between columns scrolling), progress indicators, localStorage saving position, @media queries for when to go up or down in column-count, all that kinda cool stuff.