I'm making a blog in which the results of a search for articles will be contained in divs. The layout of my website is all horizontal (i.e. the articles scroll horizontally).

Making a single line of divs is easy but that not what I want. It will be easier if I explain with a diagram. Here's how I want the divs to be:

 ______________   ______________   ______________
|    Div 1     | |    Div 4     | |    Div 7     |
|______________| |______________| |______________|
 ______________   ______________   ______________
|    Div 2     | |    Div 5     | |    Div 8     |
|______________| |______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 6     |
|______________| |______________|

But if the window is taller then there's more space vertically, which should give:

 ______________   ______________ 
|    Div 1     | |    Div 5     |
|______________| |______________|
 ______________   ______________ 
|    Div 2     | |    Div 6     |
|______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 7     |
|______________| |______________|
 ______________   ______________
|    Div 4     | |    Div 8     |
|______________| |______________|

This is what I mean by horizontal wrapping. In short, the divs take as much vertical space as then can before occupying a new column.

I was hoping this was possible with pure html/css but I'm having a feeling that it's not possible without a little bit of javascript.

I'm making a blog in which the results of a search for articles will be contained in divs. The layout of my website is all horizontal (i.e. the articles scroll horizontally).

Making a single line of divs is easy but that not what I want. It will be easier if I explain with a diagram. Here's how I want the divs to be:

 ______________   ______________   ______________
|    Div 1     | |    Div 4     | |    Div 7     |
|______________| |______________| |______________|
 ______________   ______________   ______________
|    Div 2     | |    Div 5     | |    Div 8     |
|______________| |______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 6     |
|______________| |______________|

But if the window is taller then there's more space vertically, which should give:

 ______________   ______________ 
|    Div 1     | |    Div 5     |
|______________| |______________|
 ______________   ______________ 
|    Div 2     | |    Div 6     |
|______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 7     |
|______________| |______________|
 ______________   ______________
|    Div 4     | |    Div 8     |
|______________| |______________|

This is what I mean by horizontal wrapping. In short, the divs take as much vertical space as then can before occupying a new column.

I was hoping this was possible with pure html/css but I'm having a feeling that it's not possible without a little bit of javascript.

• javascript
• html
• css

• "This is what I mean by horizontal wrapping. In short, the divs take as much horizontal space as then can before occupying a new column." I think you meant before occupying a new row. Did you? – Nasir T Commented Aug 1, 2017 at 16:32
• Sorry I meant vertical space. I'll edit that. – Pharoah Jardin Commented Aug 1, 2017 at 16:43

3 Answers 3

You can use Flexbox for this. You need to set fixed height on parent element or 100vh and flex-direction: column.

* {
  box-sizing: border-box;
}
ul {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

li {
  padding: 20px 60px;
  border: 1px solid black;
}

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

I think in pure css this can only be done with flexbox:

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

Live-Example (change the height of the container):

https://codepen.io/MattDiMu/pen/zdBxad

edit: Yes, using 100vh for the size of the container is the much more elegant solution :)

Who told you this was not possible in CSS/HTML. It is possible. Here is a sample using simple css and not even a flexbox. You just need to know the right area to put CSS properties to. In your case you need the box to be float:left in order to consume the width of the container which can be dynamic like 50vw to consume 50% of the viewable screen width or in percentage if you like.

https://codepen.io/Nasir_T/pen/rzLavm

Hope this helps.

[EDIT]

As the question had horizontal in the last line of explanation when it was asked so i miss understood it. Anyway this answer can help someone who requires a pure css solution for horizontal stacking.