CODEWITHSUNDEEP
css
PedroKTFC
PedroKTFC

Reputation: 745

Ordered list in two columns with some long entries

I'm working on an ordered list with a series of li tags with entries of varying length. I want to get them into two columns (without using column count for now). What I want to achieve is this:

Item 1              Item 2
Item 3 so           Item 4
long it overflows  
Item 5              Item 6
Item 7 also too     Item 8
long but isn't such
a problem on right

but this is what I get at best.

Item 1             Item 2
Item 3 so          Item 4
long it overflows  Item 5
Item 6             Item 7 also too long but
                   isn't such a problem on right
Item 7             Item 8

Whatever I try, floats, display:inline, etc., at best I get my first example. Can anyone think of a clean way of doing this in CSS?

EDIT: jsfiddle here: http://jsfiddle.net/c0rLqqbw/1

Upvotes: 0

Views: 91

Answers (3)

Eran.E
Eran.E

Reputation: 940

the question is little bit confusing, but if do you mean to one order list splited to 2 cloumns with css only then you can use:

HTML:

<ol>
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3 - so Item 4 long it overflows so Item 4 long it overflows</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
    <li>item 7 - also too long but isn't such
a problem on right</li> 
    <li>item 8</li>
<ol>

CSS:

ol
{
    margin: 0;
    padding: 0;
}

li
{
    list-style: none;
    width: 50%;
    padding: 5px;
}

li:nth-child(odd)
{
    float: left;
    clear: both;
}

li:nth-child(even)
{
    float: right;
}

example: http://jsfiddle.net/rm8Ldyyj/

Upvotes: 0

AndrewH
AndrewH

Reputation: 370

You can use a flexbox, however not much browser support.

HTML

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3 So long it overflows</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7 also too long but isn't such a problem on right</li>
   <li>Item 8</li>
</ul>

CSS

ul {
   display: flex;
   flex-flow: row wrap;
   width: 200px;
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

li {
   flex: 1 1 50%;
}

Upvotes: 1

Alex
Alex

Reputation: 21

Do not use columns at all. Try:

.myContainer li {
  float: left;
  width: 50%;
}

Upvotes: 1

Related Questions