Moving to next column

Question

I have following html code:

<div style="column-count: 3;">
    <ul>
        <li><h3>Education<h3></li>
        <li><a>Education 1</a></li>
        <li><a>Education 2</a></li>
        <li><a>Education 3</a></li>
    </ul>
    <ul>
        <li><h3>Careers<h3></li>
        <li><a>Careers1</a></li>
        <li><a>Careers2</a></li>
        <li><a>Careers3</a></li>
    </ul>
    <ul>
        <li><h3>Legal<h3></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
    </ul>
</div>

It divides the ul's into 3 columns. The following picture explains above code:

As you can see, Education is at the bottom of the first column, it looks weird because it's subsequent anchor tags are moved to the next column. I want to move Education to the next column as well in such case. Any CSS or JS solution?

Answer 1

A less-than-semantic but effective solution as inspired by this post is to wrap each h3 and the following a in an element, and then set them to display: inline-block.

We have to add some extra styles to make the list appear "normal" and not as a nested list, but this will effectively prevent a header from hanging at the bottom of any column. If one of the divs wrapping an h3 and the a immediately after it would normally break across columns, the use of display: inline-block on its children (i.e., the h3 and a) will prevent that break.

/* the important part */
ul li ul li div h3,
ul li ul li div a {
  display: inline-block;
  width: 100%;
}

/* aesthetics */
ul li ul {
  list-style: none;
  padding-left: 0;
}
ul li ul li {
  list-style-type: disc;
}
div {
  background-color: lightgray;
  max-height: 150px;
}

<div style="column-count: 3;">
  <ul>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>
      <ul>
        <li>
          <div>
            <h3>Education</h3>
            <a>Education 1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Education 2</a></li>
    <li><a>Education 3</a></li>
    <li><a>Education 4</a></li>
    <li><a>Education 5</a></li>
    <li><a>Education 6</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Careers</h3>
            <a>Careers1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Careers2</a></li>
    <li><a>Careers3</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Legal</h3>
            <a>Legal</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Legal</a></li>
    <li><a>Legal</a></li>
  </ul>
</div>

Compare against:

/* the important part */
/*ul li ul li div h3,
ul li ul li div a {
  display: inline-block;
  width: 100%;
}*/


/* aesthetics */
ul li ul {
  list-style: none;
  padding-left: 0;
}
ul li ul li {
  list-style-type: disc;
}
div {
  background-color: lightgray;
  max-height: 150px;
}

<div style="column-count: 3;">
  <ul>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>
      <ul>
        <li>
          <div>
            <h3>Education</h3>
            <a>Education 1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Education 2</a></li>
    <li><a>Education 3</a></li>
    <li><a>Education 4</a></li>
    <li><a>Education 5</a></li>
    <li><a>Education 6</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Careers</h3>
            <a>Careers1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Careers2</a></li>
    <li><a>Careers3</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Legal</h3>
            <a>Legal</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Legal</a></li>
    <li><a>Legal</a></li>
  </ul>
</div>

(Note: The above snippets fix a problem you had with not closing your h3 tags correctly.)

Answer 2

If you are using bootstrap, you can set put each list in a div and assign a col-xs-4 class to each div. If not, you can emulate something like the grid system.