CODEWITHSUNDEEP
htmlcss
Tristanisginger
Tristanisginger

Reputation: 2683

CSS Stop a list from splitting between columns

After a bit of research I still can't find what I'm looking for and want to make sure what I want is possible.

For a site map page I have lists of links each under a h3 tag but don't want a list split between the two columns.

Any clues?

Thanks

The CSS

    .info-col{
    max-width:720px;
    columns:350px 2;
    -webkit-columns:350px 2; /* Safari and Chrome */
    -moz-columns:350px 2; /* Firefox */
    }

    .info-blob{
}

The HTML

<div class="info-col">
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a></li>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
    </ul>
  </div>
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a>
        <ul>
          <li><a href="#">Nunc dignissim risus id</a></li>
          <li><a href="#">Cras ornare tristique</a></li>
          <li><a href="#">Vivamus vestibulum nulla</a></li>
          <li><a href="#">Praesent placerat risus</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a></li>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
    </ul>
  </div>
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a></li>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
    </ul>
  </div>
</div>

Upvotes: 3

Views: 348

Answers (2)

zessx
zessx

Reputation: 68810

Use column-break-inside on .info-blob:

.info-blob {
    -webkit-column-break-inside : avoid;
    -moz-column-break-inside : avoid;
    column-break-inside : avoid;
}

As an alternative, and if you want it to be cross-browser, replace your CSS by :

.info-blob {
    display: inline-block;
}

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Use break-inside:avoid (and related vendor-prefixed versions) on the info-blob containers.

Updated Fiddle with the Webkit prefix - I'm not familiar with the exact one for -moz- but it shouldn't be too hard to figure out ;)

Upvotes: 0

Related Questions