title: How to have a <div> element that groups <li> elements inside of <ul>
body: <p>OK so for my site we have a navbar that uses a list. We have a section of elements that float left, and a section that floats right. My code works perfectly, it's just that the W3 validator constantly tells me that I can't have a div element inside of a ul element. If I assigned each individual li element the class that floats them left, they don't stay on the same line. Here's the code (exact links have been removed): </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar {
    font-family: 'Open Sans', sans-serif;
  }
  .navbar ul {
    list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #333333;
    display: block;
  }
  .navbar li a {
    display: block;
     color: white;
     text-align: center;
     padding: 10px;
    text-decoration: none;
  }
  
   /* On-site navigation */
  .leftnav li {
     float: left;
  }
  .leftnav li:hover {
    background-color: #111111;
  }
  
  /* Links to Social Media */
  .medianav li {
    float: right;
  }
  .medianav li:nth-child(1) {
    background-color: #ff0000;
  }
  .medianav li:nth-child(1):hover {
    background-color: #ff6666;
  }
  
  .medianav li:nth-child(2) {
    background-color: #7289DA;
  }
  .medianav li:nth-child(2):hover {
    background-color: #99AAB5;
  }
  
  .medianav li:nth-child(3) {
    background-color: #1da1f2;
  }
  .medianav li:nth-child(3):hover {
    background-color: #49baff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar"&gt;
    &lt;ul&gt;
      &lt;div class="leftnav"&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="members.html"&gt;Members&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="smash.html"&gt;Smash Club&lt;/a&gt;&lt;/li&gt;
      &lt;/nav&gt;
  
      &lt;div class="medianav"&gt;
        &lt;li&gt;&lt;a href="https://www.youtube.com"&gt;YouTube&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="https://discord.gg"&gt;Discord&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
      &lt;/nav&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is what it has to look like:
  <img src="https://i.stack.imgur.com/nNfPf.png" alt="And this is what it has to look like"></p>
  
  <p>However, if I do this to the html, which makes the validator happy:</p>
  
  <pre><code>&lt;nav class="navbar"&gt;
      &lt;ul&gt;
          &lt;li class="leftnav"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="leftnav"&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="leftnav"&gt;&lt;a href="members.html"&gt;Members&lt;/a&gt;&lt;/li&gt;
          &lt;li class="leftnav"&gt;&lt;a href="smash.html"&gt;Smash Club&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="medianav"&gt;&lt;a href="https://www.youtube.com"&gt;YouTube&lt;/a&gt;&lt;/li&gt;
          &lt;li class="medianav"&gt;&lt;a href="https://discord.gg"&gt;Discord&lt;/a&gt;&lt;/li&gt;
          &lt;li class="medianav"&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>This happens:
  <img src="https://i.stack.imgur.com/eEHmK.png" alt="This happens"></p>
  
  <p>So how do I fix this? Sorry if it was long, or has been asked before in different words, but I couldn't find any other resource.</p>