Page with multiple columns, horizontal scrolling, no vertical scrolling - html

Question

I'd like to build a web page that has multiple columns. Within each column there will be boxes containing text; each box will either fit in one column or go to the top of the next column. If there are more columns than fit on the page, there should be horizontal scrolling. There should be no vertical scrolling. Here's an image of what I'd like to achieve:
In the example, box "The title 7" wouldn't fit at the bottom of column 1, so started new column 2. And then when no more new boxes can fit in column 2, they start at the top of column 3.
What I've so far managed to achieve is all the boxes in one column, using this CSS:
.outer {
height: 500px;
overflow-x: scroll;
background: #fc8;
}
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;
}
The boxes are in a div.outer and have this HTML:
<div class='outer'>
<div class='box'>
<h1>The title 1</h1>
<p>Some text here...</p>
</div>
...etc...
</div>
See JS Fiddle for example. Ideally I'd like a solution that's just HTML and CSS, no JavaScript.

Answer 1

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>

Answer 2

You can achieve similar structure using CSS3 column property.
.outer {
height: 500px;
overflow: auto;
background: #fc8;
-webkit-columns: 3;
-moz-columns:3;
columns:3;
-webkit-column-width:250px;
-moz-column-width:250px;
column-width:250px;
-webkit-column-gap:10px;
-moz-column-gap:10px;
column-gap:10px;
}
DEMO