How to fix overflowing list items to other column

Question

I have a ul list that I am displaying as a grid (3 columns) - each list item has two lines in it.

For some reason in my code, in the last ul list one of the list item is overflowing to the next column (so one line in the list item is on the first column while the other is on the other column)

Debugging through it it seems like this particular ul is shorter in height than the others, and I simply do not know why.

I have tried tweaking around and setting the height to maximum but it does not seem to have any affect.

Code can be seen here:

     <div class = "skills">
<h2 id="Skills"> Skills </h2>
<ul>
  <li>HTML<div class="rating">●●●●●</div></li>
  <li>CSS<div class="rating">●●●●●</div></li>
  <li>Javascript<div class="rating">●●●●●</div></li>
  <li>Python<div class="rating">●●●●●</div></li>
  <li>Java<div class="rating">●●●○○</div></li>
  <li>MySQL<div class="rating">●●●○○</div></li>
  <li>ARM Assembly<div class="rating">●●●○○</div></li>
  <li>Ada<div class="rating">●●●○○</div></li>
</ul>
<ul>
    <li>MS Office<div class="rating">●●●●●</div></li>
    <li>Git<div class="rating">●●●●●</div></li>
    <li>Windows<div class="rating">●●●●●</div></li>
    <li>Command Line<div class="rating">●●●●●</div></li>
    <li>Mac<div class="rating">●●●●○</div></li>
    <li>Adobe Photoshop<div class="rating">●●●●○</div></li>
    <li>Beatboxing<div class="rating">●●●●○</div></li>
    <li>Minecraft<div class="rating">●●●●○</div></li>

</ul>

<ul>
    <li>Data Analytics<div class="rating">●●●●○</div></li>
    <li>Public Speaking<div class="rating">●●●●○</div></li>
    <li>Agile<nobr><div class="rating">●●●●○</div></li>
    <li>Leadership<div class="rating">●●●●○</div></li>
    <li>Communication<div class="rating">●●●●○</div></li>
    <li>Scrum<div class="rating">●●●●○</div></li>
    <li>Project Management<div class="rating">●●●●○</div></li>
</ul>

http://jsfiddle.net/6ud78ron/3/

I expect the lists not to break in the middle like in the Agile list item

Why are you using `` it is obsolete and not standard: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr — Jon P, Aug 23 '19 at 03:08
Also please include all code relevant to the question **in the question itself**, in this case your CSS. Don't make us go off site to find critical information. Please see [mcve] — Jon P, Aug 23 '19 at 04:02
Possible duplicate of [How to prevent column break within an element?](https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) — Jon P, Aug 23 '19 at 04:04

score 0 · Answer 1 · answered Aug 23 '19 at 03:12

0

You can refer here: How to prevent column break within an element?

.skills ul li {
    break-inside: avoid-column;
}

answered Aug 23 '19 at 03:12

Harun

1
1

score 0 · Answer 2 · edited Nov 17 '19 at 09:45

Just use break-inside CSS property for preventing overflow from the list items to other column on your list items: break-inside: avoid-column

.skills ul {
   columns: 3;
   text-align: center;
   list-style: none;
   overflow: hidden;
   white-space: nowrap;
   margin-top: 5%;
}
.skills ul li {
   padding-top: 5px;
   font-size:  1.0em;
   overflow: hidden;
   white-space: nowrap;
   break-inside: avoid-column;
}
.rating {
   font-family: sans-serif;
   font-size: 2em;
   color: darkslategray;
}
/* ----------- */
/* -------------------- */
/* SOCIAL MEDIA SECTION */
/* -------------------- */
.contact ul{
   list-style-type: none;
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: no-wrap;
   /* text-align: center; */
}
.contact li {
   text-align: center;
   /* padding: 14px 16px; */
   text-decoration: none;
   display: inline;
   margin-left: 10%;
   margin-right: 10%;
}
nav a {
   color: white;
   text-decoration: none;
}
nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.socialMediaLinks img {
   width: 200%;
}

<div class = "skills">
    <h2 id="Skills"> Skills </h2>
    <ul>
        <li>HTML<div class="rating">●●●●●</div></li>
        <li>CSS<div class="rating">●●●●●</div></li>
        <li>Javascript<div class="rating">●●●●●</div></li>
        <li>Python<div class="rating">●●●●●</div></li>
        <li>Java<div class="rating">●●●○○</div></li>
        <li>MySQL<div class="rating">●●●○○</div></li>
        <li>ARM Assembly<div class="rating">●●●○○</div></li>
        <li>Ada<div class="rating">●●●○○</div></li>
    </ul>
    <ul>
        <li>MS Office<div class="rating">●●●●●</div></li>
        <li>Git<div class="rating">●●●●●</div></li>
        <li>Windows<div class="rating">●●●●●</div></li>
        <li>Command Line<div class="rating">●●●●●</div></li>
        <li>Mac<div class="rating">●●●●○</div></li>
        <li>Adobe Photoshop<div class="rating">●●●●○</div></li>
        <li>Beatboxing<div class="rating">●●●●○</div></li>
        <li>Minecraft<div class="rating">●●●●○</div></li>
    </ul>
    <ul>
        <li>Data Analytics<div class="rating">●●●●○</div></li>
        <li>Public Speaking<div class="rating">●●●●○</div></li>
        <li>Agile<nobr><div class="rating">●●●●○</div></li>
        <li>Leadership<div class="rating">●●●●○</div></li>
        <li>Communication<div class="rating">●●●●○</div></li>
        <li>Scrum<div class="rating">●●●●○</div></li>
        <li>Project Management<div class="rating">●●●●○</div></li>
    </ul>
</div>
<div class="contact">
    <h2> <a id="contactMe"></a> Stalk me here </h2>

</div>

How to fix overflowing list items to other column

2 Answers2