Steve Jobs hates buttons. I hate scroll bars. I’ve always avoided scroll bars on pages where t

by admin

Steve Jobs hates buttons. I hate scroll bars.

I’ve always avoided scroll bars on pages where they aren’t needed. A scroll bar on a page where 95% of the content is already visible is distracting; a scroll bar that appears as a page contracts is trying to solve a problem of too little space by taking more away.

That said, overflow: hidden; can be a serious display liability. I’d had reports of content disappearing off the bottom of my homepage on smaller screens, and that was back when there were only five items. With a sixth just added, clearly something needed to change. 

To avoid height issues, I split the list into two separate columns, and then placed those in a <div> set to max-width: 920px to keep them close together on large displays. Continuing to use overflow: hidden; at the body level allows the two columns to slide smoothly over each other as the screen collapses.

Call it graceful netbook degradation—with a height of just over 400px, and the important elements still visible and accessible at nearly any width, the layout remains useful (and kinda stylish) down to some absurdly small resolutions—all without ever forcing the user to scroll.