How can I create a single-line CSS layout that flows to the right endlessly, with each box occupying a set percentage of the viewport width (e.g. 20%)?
To better illustrate, refer to the following diagram:
+-----------------------------+
|VIEWPORT |
| |
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+
|BOX| |BOX| |...| | | | | | | | | | | | | | |
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+
| |<--->| |
| 20% of the viewport width |
| |
+-----------------------------+
Why do I need this?
I want to present an alternative view on my website, particularly for displaying a calendar. Currently, the calendar is shown as a grid (visit ), and I would like to offer a different display with seven visible boxes (with the current day placed in the center). Users can navigate using left and right buttons to scroll through each box. While I could achieve this with JavaScript, I am seeking a CSS solution for setting box sizes.
What am I struggling with?
While I understand how to accomplish this using JavaScript, I am having trouble figuring out how to specify sizes based on viewport width in CSS (as opposed to parent container width). Any suggestions or insights would be greatly appreciated.