Responsive 2 column css layout with one column overflow horizontal scroll

Question

I've got a responsive 2 column layout going on. The first column is a fixed width, while the second one is using the css calc property to subtract certain pixels from its 100% width.

What I want the second column to do is to scroll horizontally, regardless of the screen size or width of it. I threw together a quick pen to illustrate what I'm trying to do: http://codepen.io/trevanhetzel/pen/nbdIt

As you can see, the second column has multiple .thing divs inside of it that are floated left and have a defined width. What I DON'T want is for these .thing divs to drop down to another line when they run out of room inside the second column.

How can this be achieved? I tried messing the overflow property, but I think I might need another container div with some different positioning properties or something. Any advice?

Answer 1

Here you go: http://codepen.io/seraphzz/pen/lutjb

The solution to this is:

1. Change .thing from float: left; to display: inline-block;. This keeps those elements in line, but also keeps them in flow so the parent element acknowledges it has children
2. Give section a white-space: nowrap; property. This prevents the .thing elements from going to another line.
3. Give section an overflow-x: auto property. This allows the div to be scrolled horizontally, but hides the scrollbar if there are not enough children to need it.
4. Lastly, give section a font-size: 0 property. By default, elements that are display: inline-block are treated like text, and are thus given an automatic margin. Setting font-size: 0 on the parent of those elements removes that automatic margin, allowing you to set the margin as you like. Remember, you will need to manually set the font-size of these child items if they contain text.