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?

In your question where it says "What I actually want is:" the example below it shows the "General" and "Subjects" sections twice. Is there a reason for that? — j08691, Sep 22 '18 at 21:18
@j08691It's just a placeholder where I'd add different sections. I've changed to it `foo` and `bar` now to clear up the confusion — David Wheatley, Sep 22 '18 at 21:19
So, you have a section `#sitemap` divided in 5 columns, but the section contains two (or more if you wish) divs with arbitrary content. I think you are mixing things up. If you want CSS to divide your `#sitemap` in 5 sections, that's exactly what it's going to do. Take a looks at this [link](https://www.w3schools.com/howto/howto_css_two_columns.asp) so you have a better idea of how to do it. — luenib, Sep 22 '18 at 21:34
I'd suggest [`break-inside: avoid; break-after: always`](https://jsfiddle.net/davidThomas/ge1svq32/); though I'm not entirely sure that that's what you're wanting. Though I would advise Flexbox or CSS Grid rather than the current approach. — David Thomas, Sep 22 '18 at 21:35
@DavidThomas That works perfectly, but you make a great point -- moving forward, CSS Flex and Grid is the way to go. Now I realise anyway that my site doesn't support IE anyway so support for it doesn't matter. I used kfedorov91's answer anyway. — David Wheatley, Sep 22 '18 at 21:52

score 2 · Accepted Answer · answered Sep 22 '18 at 21:26

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>

I guess this is the only way to do it. Browser compatibility for flex isn't _too_ bad, but maybe I could look into table styling instead. — David Wheatley, Sep 22 '18 at 21:28

5150 Design · Answer 2 · 2018-09-23T19:17:52.787

You can accomplish this without flexbox.

#sitemap {
  min-width: 100%;
}

#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;
  margin: 0;
  padding: 0;
}

#sitemap div {
position: relative;
float: left;
width: 18%;
margin: 0 1.5% 0 0;
padding: 0;
}

<div id="sitemap">

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

</div>

Split div into multiple columns without breaking child elements

2 Answers2