Multi-column issue with horizontal scroll
New Answer: Use Pseudo-Elements to Help
Based on your comments, here is new the fiddle that I believe meets your desires. It adds an extra div wrapping .columns I labeled .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 a pseudo-element in .main to give the background for .columns set to the explicit height you intend for those, then I also use another pseudo-element in the last p to force rendering the final 20px of the column. It should work no matter how long or what part it takes up, and at height: 1px and margin-top: -1px it should not generate a new column if it falls right at the end of a column of text.
Original Answer: Move Overflow and Set a Right Margin
To get the background to transfer, you need to change some CSS, namely:
.main {
overflow: hidden;
width: 100%;
}
.columns {
overflow-x: auto;
}
This seems to be because the .column background is being limited by the 100% width on the .main which is in control of the horizontal scroll bar in your original code. By making .main purely hidden, then setting overflow-x: auto on .columns, the scroll is now controlled by the .columns div, and allows its background to be seen.
To fix the absence of padding on the far right side, the only think I could come up with was to add the following:
.columns > p:last-of-type {
margin-right: 20px;
}
This puts a right margin on the last p element of the immediate children of .columns which then gave the look I assume you are going for.
Here's the fiddle modified (tested only in Firefox).
Two row multi column horizontal scroll grid with flex
Should fit your needs. Using only CSS.
.wrap {
display: flex;
}
.box {
box-sizing: border-box;
width: 220px;
height: 160px;
margin: 20px;
background-color: #2c3e50;
flex-shrink: 0;
}
/* DESKTOP */
@media (min-width: 1024px) {
.wrap {
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
height: 400px;
}
}<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>Page with multiple columns, horizontal scrolling, no vertical scrolling
You can make use of flexbox layout. The columns will wrap after it reaches the maximum height using flex-flow: column wrap. Make sure you look into the browser support for flexbox.
JSfiddle Demo
.outer {
height: 500px;
overflow: auto;
background: #fc8;
/* Added CSS */
display: flex;
flex-flow: column wrap;
}
h1 {
font-size: 18px;
margin: 1px 0px 3px 0px;
color: #248;
}
p {
font-size: 13px;
margin: 2px 0px;
}
.box {
background: #def;
padding: 3px 6px;
border: 2px solid #369;
margin: 3px 6px;
vertical-align: top;
width: 250px;
}<div class='outer'>
<div class='box'>
<h1>The title 1</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 2</h1>
<p>
Some different text here...
</p>
</div>
<div class='box'>
<h1>The title 3</h1>
<p>
Some longer text here. Danish croissant. Powder halvah. Tootsie roll topping tiramisu jelly-o fruitcake cheesecake marzipan.
</p>
</div>
<div class='box'>
<h1>The title 4</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 5</h1>
<p>
Some text here. Chocolate cake gummi bears wafer apple pie. Bear claw gummies pie sugar plum jujubes. Liquorice croissant sugar plum danish macaroon.
</p>
</div>
<div class='box'>
<h1>The title 6</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 7</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 8</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 9</h1>
<p>
Some varied text here...
</p>
</div>
<div class='box'>
<h1>The title 10</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 11</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
<div class='box'>
<h1>The title 12</h1>
<p>
Some text here...
</p>
</div>
</div>Fix columns in horizontal scrolling
SOLVED
https://jsfiddle.net/DJqPf/7/
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:250px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
th:first-child {
position: fixed;
left: 5px
}
UPDATE
$(function () {
$('.table-wrapper tr').each(function () {
var tr = $(this),
h = 0;
tr.children().each(function () {
var td = $(this),
tdh = td.height();
if (tdh > h) h = tdh;
});
tr.css({height: h + 'px'});
});
});body {
position: relative;
}
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:200px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
tbody tr {
}
th:first-child {
position: absolute;
left: 5px
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>SOME RANDOM TEXT</h1>
</div>
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan is an awesome month</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Mar</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Apr</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>May</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Jun</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</body>
</html>Related Topics
Create Line After Text with CSS
Different Behaviours of Treating \ (Backslash) in the Url by Firefox and Chrome
Glyphicons Rendering as Empty Box
Display:Block Not Working in Chrome or Safari
Infinite Image Slider with Pure CSS3
How to Use Transform-Origin in Conjunction with Svgs
Difference Between "A" and "A:Link"
Bootstrap 4 Row Height Set by Specific Col - Not Highest One
Bootstrap 3 & Boostrap 4 & Bootstrap 5 - Input-Xs (Smaller Than Sm)
How to Calculate Percentages in Less CSS
Nesting Inside CSS :Not() Selectors
Is It Allowed to Use Any Decimal Value in CSS Keyframe Animations
Dynamic Variable Names in Less CSS
Differencebetween Applying CSS Transition Property in Hover Rather Than in Its Normal State