Need help displaying children lists without spacing the parent lists

Question

I am printing out a list of college majors we offer, then within each major, we have concentrations for each major.

Our Science Major has the following concentrations: Environmental Science & Forestry, Chiropractic, Chemistry, Biology

Here is a screen shot of what it is doing:

I do not want the spacing it displays (I do not want the spacing you see after Human Resource Management AAS and after Psychology.) in the screen shot, any help is appreciated.

The source would look like this:

.col-middle .majors-list li {
  list-style-type: none;
  width: 50%;
  float: left;
  margin-bottom: 2px;
}

.col-middle ul.majors-list {
  margin-left: 0;
}

.col-middle ul.concentrations-list {
  overflow: auto;
}

.col-middle .concentrations-list li {
  float: none;
}

<ul class="majors-list">
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
</ul>

Answer 1

Without some javascript you won't be able to do this. With mozilla or webkit you can use -[moz|webkit]-column-count: 2; but even that isn't going to give you the same solution that the given css is almost providing for you, in other words the ordering will be vertical instead of horizontal. When I was playing with the column-count property, the inner lists were being split on the columns too, which I assume would not be adequate either.

A javascript solution, which I believe could be accomplished pretty easily with a framework like jquery, would probably take each of the li elements and dynamically position them with a combination of position:relative and position:absolute attributes and a little bit of math.

Answer 2

Try float: right instead of float: left.

This works for Firefox 2. Doesn't work with (many) other browsers.

Answer 3

You want to give the concentrations-list class a display: none; property in CSS. You can then display one of the sublists by giving it onclick event that changes the class to concentrations-list-showing and adding a concentrations-list-showing class to the CSS and giving it a display: block; property.

Answer 4

You can do this with CSS3 Columns but I'm guessing you need this to work in that browser.

Answer 5

One thing you could try is making your ul.majors-list display: inline; (or inline-block) and float: left; It may work.

---

The above should have been "try making your ul.majors-list li display: inline;". But I can't get it to work just playing around with it quick. Not sure how you're going to be able to do this without getting rid of the top-most ul and just making each be their own list.