Samuel Denty Samuel Denty - 1 year ago 53
CSS Question

Place DIV in new column when end of page reached

I have some DIVs on a page. How can I make the DIVs create a new column on the right when the bottom of the page is reached. So I have some small fixed height DIVs with images inside them. After every DIV, there is a line and then the next div and so on. On smaller displays, the screen requires scrolling to see the DIVs. So I added overflow: hidden to the body, to disable the scrolling. Now the DIVs at the very bottom are cut out, so I want the DIVs that are cut out, to create a new column to the right.

The project I'm working on is

See the picture below picture.

body {
overflow: hidden;}
#icon {
background: #000;

<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>

Answer Source

@samuel-denty are you looking for CSS Columns ?

here is jsfiddle:
try using class (.) icon instead of id (#) on css, like this:

body {
    overflow: hidden;
    -webkit-columns: 50px 2;
    -moz-columns: 50px 2;
    columns: 50px 2;
.icon {
    background: #000;

    <div class="icon">1</div><br>
    <div class="icon">2</div><br>
    <div class="icon">3</div><br>
    <div class="icon">4</div><br>
    <div class="icon">5</div><br>
    <div class="icon">6</div><br>
    <div class="icon">7</div><br>
    <div class="icon">8</div><br>
    <div class="icon">9</div>