CODEWITHSUNDEEP
htmlcss
yavg
yavg

Reputation: 3051

how to make the content of a div go to the next column by exceeding the height of this div

I apologize if I have not formulated the question well, I hope to make myself understood. basically I have a list of elements, these are distributed in each line. I would like that when this line is going to exceed the total size of the div, the list will continue in the space available in front.

enter image description here

<div>
  <ul>
    <li>
      1  
    </li>
    <li>
      2  
    </li>
    <li>
      3  
    </li>
    <li>
      4  
    </li>
    <li>
      5  
    </li>
    <li>
      6
    </li>      
  </ul>
</div>

div
{ 
 border: 1px solid red;
 height: 100px;
 width:300px;
}

how can I do it?

https://jsfiddle.net/ug0f38b1/

Upvotes: 3

Views: 696

Answers (2)

Andy Hoffman
Andy Hoffman

Reputation: 19119

I'm using flexbox to solve this with the direction set to column. You need the height of the ul to fill the parent container so it knows when to break.

The items are naturally distributed as the list grows. enter image description here

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  margin: 0;
}
<div>
  <ul>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
    <li>
      5
    </li>
    <li>
      6
    </li>
  </ul>
</div>

jsFiddle

Adjusting column spacing

One nice thing about using flexbox for this is that we can set the ul to be inline-flex which allows easy control over the column spacing.

enter image description here

jsFiddle

Upvotes: 2

Chris Tapay
Chris Tapay

Reputation: 1023

A combination of both columns and column-fill can be used. Check the example below.

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
  padding: 1rem;
}

ul {
  margin: 0;
  height: 100%;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}
<div>
      <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>
    </div>

Upvotes: 0

Related Questions