0

Can we display a single list in two different columns i.e. two different containers Or a single div but different columns?

<div>
<ul>
<li>HTML</li>
<li>CSS</li>
</div>
<div>
<li>javascript</li>
<li>jquery</li>
</div>

I want the above to appear as:

HTML javascript CSS jquery

Also the elements in first column may vary and if the elements decrease the elements from the second column must occupy the entire space.

2
  • 5
    put the html along with question
    – xkeshav
    Jul 2, 2012 at 5:51
  • you need to add more explanation.. please add some html code to the question.. Jul 2, 2012 at 5:54

1 Answer 1

0

No you can not (edit: cut the list off in the middle as in your suggested HTML). What you can do is create two separate lists, but if what you're after is for the list to appear as:

1. HTML 2. javascript 3. CSS 4. jquery

I fail to understand why you simply don't just put the items in that order and display the lis as 'inline`?

If in fact you want the list to appear as:

1. HTML 3. JavaScript
2. CSS 4. jQuery

And the order of the items is "1. HTML, 2. CSS, 3. JavaScript, 4. jQuery" you will need to use column-count: 2 on the ul. This will place the list items in columns where the first two items will be in the left column, and the last two items in the right column. column-count only works in modern browsers so for the rest you'll need to use float or inline-block which will make the list appear as:

1. HTML 2. CSS
3. JavaScipt 4. jQuery
2
  • i already know column post and li inline solution. Are you definite that it cannot be achieved? Jul 3, 2012 at 7:30
  • You can not use the HTML you suggested in your question, no.
    – powerbuoy
    Jul 3, 2012 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.