Problem with multiple horizontal scroll columns

Question

I have a parent div (main) with horizontal overflow set to auto. Then I have a child element (columns) that has all my column properties on it. The problem is that after the content goes further than the viewport, I can no longer control the right-hand margins or padding, as the column seems to only get to the viewport. For example, when I put the background color in the “columns”, the background only reaches the edge of the viewport, even if the content scrolls further than that.

.main { overflow-x: visible; overflow-y: hidden; width: 100%; } .columns { background: red; column-fill: auto; column-width: 670px; column-gap: 80px; height: 120px; padding: 20px; width: auto; } <div class="main"> <div class="columns"> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </div> 

Here is an example: http://jsfiddle.net/fyG24/

Answer 1

New answer: use pseudo-elements to help

Based on your comments, here is a new violin that I think fits your desires. It adds an extra wrapping of div .columns I, labeled as .scroller , and the following css:

 html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } .main { background: yellow; overflow: hidden; width: 100%; height: 100%; position: relative; } .main:after { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 120px; /* match columns */ background: red; z-index: 0; } .scroller { overflow-y: hidden; overflow-x: auto; height: 100%; position: relative; z-index: 1; } .columns { -webkit-column-fill: auto; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-fill: auto; -moz-column-width: 300px; -moz-column-gap: 40px; height: 120px; padding: 0 20px; text-align: justify; width: auto; } .columns > p:last-of-type:after { content: ''; display: block; width: 20px; height: 1px; float: right; margin-right: -20px; margin-top: -1px; } 

I use the .main pseudo- .main to give the background for the .columns set to the explicit height you intend for them, then I also use another pseudo-element in the last p to force the final 20px column to be displayed. It should work no matter how much time or what part it takes, and in height: 1px and margin-top: -1px it should not generate a new column if it goes straight to the end of the text column.

Original answer: move overflow and set correct margin

In order to pass background for transfer, you need to change some CSS, namely:

 .main { overflow: hidden; width: 100%; } .columns { overflow-x: auto; } 

This is because the .column background .column limited to 100% width on .main , which controls the horizontal scroll bar in the source code. By making .main purely hidden, then setting overflow-x: auto to .columns , the scroll is now controlled by the div .columns and allows its background to be seen.

To fix the missing gasket on the right side, the only thing I could think of was to add the following:

 .columns > p:last-of-type { margin-right: 20px; } 

This puts the right edge in the last element p immediate children of .columns , which then gives the view, which I assume you are going to.

Here the script is changed (tested only in Firefox).

Answer 2

I achieved the best results by splitting the css columns as follows:

 .columns { -webkit-column-fill: auto; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-fill: auto; -moz-column-width: 300px; -moz-column-gap: 40px; height: 120px; } .columns p { background: red; height: 120px; padding: 0 20px; text-align: justify; width: auto; }