Question

I’d like to make a single-line CSS layout which flows to the right indefinitely.
Each box would have a certain percentage (e.g. 20%) of the viewport width.

This is much easier to explain with a picture:

+-----------------------------+
|VIEWPORT                     |
|                             |
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ 
|BOX| |BOX| |...| |   | |   | |   | |   | |   | |   | |   | 
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ 
|           |<--->|           |          
|   20% of the viewport width |
|                             |
+-----------------------------+

Why would I want to do this?

I have a site which displays a calendar (as a grid, http://www.airdates.tv/) and I’d like to offer an alternate view. There would be seven boxes visible (the current day being in the middle). I’d use javascript to offer left/right buttons that scroll exactly one box to the left/right. Of course, I could do the box sizing with JavaScript too, but I’d very much prefer a CSS solution.

What’s my problem?

I know it can easily be done with javascript, but in css i can’t wrap my around how to specify sizes in terms of the viewport width (opposed to terms of the parent container width). I welcome any kinds of vague thoughts, suggestions or snippets.

Answer 1

This solution could be done without the outer wrapper, but I figure you are going to want other things on the page, so will probably want to isolate it.

It uses inline-block to get the horizontal flow.