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

error outputting html with javascript

php javascript html ajax

I have this php code, with which I am trying to generate a popup window that will contain the contents of a html file, however after adding in the script tags, no html is displayed. I tried echoing...

Clicking on content tab routing to different page with AngularJS

javascript angularjs tabs routes angular-ui-router

I have the following state using angular-ui-router module and I am currently at the url http://localhost:3000/#/bar/87023/ where 87023 is the value of a.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.