Split div into multiple columns without breaking child elements

Question

I want to use CSS Columns for a website sitemap. The issue I'm having is that the sections that are encapsulated in divs are being split across columns.

What I actually want is shown below, where every child element is forced to be in a separate column. I could use CSS Grid for this but I need to support older IE version too that don't have CSS Grid.

    GENERAL    |    SUBJECTS    |       FOO      |       BAR      |
- Log in       | - Log in       | - Log in       | - Log in       |
- Register     | - Register     | - Register     | - Register     |
- Contact      | - Contact      | - Contact      | - Contact      |
- ...          | - ...          | - ...          | - ...          |

Each column above is contained within one parent div element (as shown below in the HTML code).

#sitemap {
    min-width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-columns: 5 175px;
    -moz-columns: 5 175px;
    columns: 5 175px;
}

#sitemap a[href] {
    text-decoration: none;
    align-content: baseline;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

#sitemap a[href]:hover {
    border-bottom-color: #000;
}

#sitemap a[href] * {
    line-height: 1.1rem;
    vertical-align: middle;
}

#sitemap ul {
    list-style: none;
}

<div id="sitemap">
  <div class="section">
    <h6 class="mdc-typography--headline6">General</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Blog
        </a>
      </li>
    </ul>
  </div>
  <div class="section">
    <h6 class="mdc-typography--headline6">Subjects</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Blog
        </a>
      </li>
    </ul>
  </div>
</div>

Is the only option to use flexbox or grid layout? Is there any way I could use multi column layout to achieve this to keep backwards compatibility with older browsers?

Answer 1

Use display: flex; styling for #sitemap.

Example snippet:

#sitemap {
  display: flex;
}

h6 {
  margin: 10px 0;
}

#sitemap .section {
  margin: 0 10px;
}

#sitemap a[href] {
    text-decoration: none;
    align-content: baseline;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

#sitemap a[href]:hover {
    border-bottom-color: #000;
}

#sitemap a[href] * {
    line-height: 1.1rem;
    vertical-align: middle;
}

#sitemap ul {
    list-style: none;
    padding: 0;
}

<div id="sitemap">
  <div class="section">
    <h6 class="mdc-typography--headline6">General</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Blog
        </a>
      </li>
    </ul>
  </div>
  <div class="section">
    <h6 class="mdc-typography--headline6">Subjects</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Blog
        </a>
      </li>
    </ul>
  </div>
</div>