2 column lists gets separated by its heading

Question

I was trying to get the h2 along with its list items, but every time the list count varies the header seems to be appearing in separate column and its lists in other column is there any way that the header should be stuck along with its lists? below is my code,

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

I also tried replacing parent li's with the divs but as the child ul's doesnt have unique no of childrens there in uneven vertical gap after the divs!! Is there any dynamic workaround?(i.e. even if the child li count varies the header should always stick to its siblings ul)

G-Cyrillus · Accepted Answer · 2020-03-22T09:35:28.990

You can reset li display to inline-block , so it should not break into 2 columns

demo

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {/*to  avoid li to spray through 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

to push them into first column at the most, another trick is to set a margin on the last element , this is an average setting and not 100% reliable if content and size is not static , content has to be balanced somehow, run snippet below in full page and resize width to see that average setting in action:

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {
  /*to  avoid li to spray through 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}


/* average pusher */
/* only for the show, not wise to use, unless for static and known content */

ul.list-parent> :last-child {
  padding-bottom: 20%;/* or a static value*/
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

2 column lists gets separated by its heading

1 Answers1

Linked