Need help displaying children lists without spacing the parent lists

Answer 1

Try float: right instead of float: left.

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

Answer 2

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 3

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

Answer 4

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 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.