Need help displaying children lists without spacing the parent lists

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:

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

Here is the CSS:

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

Answers


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.


Need Your Help

Creating char arrays with << (less less) in C

c arrays

What does it mean when arrays are defined like:

Codeigniter DB errors after stored procedure call

php mysql codeigniter

I have a database that has a few stored procedures in it that I would like to call via CodeIgniter. I have the following code in my Model class: