5

I have two lists that I'm floating into two columns. I want to make it so on small screens, the items become one column, BUT I'd like to alternate the items.

<div>
    <ul class="left">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
        <li>Item D</li>
    </ul>
    <ul class="right">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

So the result should look like this on small screens.

Item A
Item 1
Item B
Item 2
Item C
Item 3
Item D
Item 4

Here is my starting jsfiddle. Should I instead make one list with li width set to 50%? I wanted to see if this was possible while keeping the HTML markup the way it is.

http://jsfiddle.net/aAhX9/

Matt
  • 5,283
  • 9
  • 51
  • 93

2 Answers2

11

The only way to do this (outside of some very laborious positioning) is to combine the elements into a single list, giving each li a class-name and styling them appropriately:

<div>
    <ul>
        <li class="left">Item A</li>
        <li class="right">Item 1</li>
        <li class="left">Item B</li>
        <li class="right">Item 2</li>
        <li class="left">Item C</li>
        <li class="right">Item 3</li>
        <li class="left">Item D</li>
        <li class="right">Item 4</li>
    </ul>
</div>

li {
    list-style-type: none;
    width: 50%;
}

li.left {
    float: left;
    background-color: #0f0;
}

li.right {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
    }
}

Updated JS Fiddle demo.

As noted by Hashem, in the comments below, it would be possible to use the :nth-child() selector, rather than class-names, to style the various li elements left, or right:

li:nth-child(odd) {
    float: left;
    background-color: #0f0;
}

li:nth-child(even) {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    li {
        float: none;
        width: 100%;
    }
}

Updated JS Fiddle demo.

David says reinstate Monica
  • 230,743
  • 47
  • 350
  • 385
  • 1
    Brilliant @David. great job. – Hashem Qolami Aug 25 '13 at 20:28
  • 1
    It's been a cause of much lament, between my parents, that I've yet to discover *what* the box *is*; let alone *where*... ;) – David says reinstate Monica Aug 25 '13 at 20:29
  • 1
    Also using `:nth-child(odd)` and `:nth-child(even)` could be an option. – Hashem Qolami Aug 25 '13 at 20:29
  • @Hashem: that's a very good point; edited it into the answer, thanks! – David says reinstate Monica Aug 25 '13 at 20:32
  • @HashemQolami `:nth-child(odd)` and `:nth-child(even)` http://jsfiddle.net/kevinPHPkevin/aAhX9/8/ would work but then you'd limit your desktop browser compatibility. – Kevin Lynch Aug 25 '13 at 20:36
  • @Vector And how many browsers support [CSS3 media query](http://caniuse.com/#feat=css-mediaqueries)? 99.9% of browsers support media query, will support [`nth-child`](http://caniuse.com/#feat=css-sel3) selector as well. – Hashem Qolami Aug 25 '13 at 20:38
  • 2
    The media query only needs to be supported by mobile browsers in the original example as the `li` were targeted by class, therefore a desktop could float them without a problem. The `:nth-child(odd)` and `:nth-child(even)` option will not get floated by non-modern browsers and remain as a single list. – Kevin Lynch Aug 25 '13 at 20:42
  • @Apptracker, very true. The second option would remain as a single list in an old browser. the first option is best. Supports desktops where needed and mobiles where needed. It would appear some people are confused by this concept –  Aug 25 '13 at 20:45
  • @HashemQolami the desktop doesn't need to support the media query in this example!. The first example would work on an iphone and ie7, the second one wouldn't. – Kevin Lynch Aug 25 '13 at 20:46
  • @Vector But iOS since v3.2 to 7.0 support [`:nth-child()`](http://caniuse.com/#feat=css-sel3). and does IE7 support media query itself? If so, fork the correspond page from caniuse.com and send a pull request. – Hashem Qolami Aug 25 '13 at 20:48
  • Okay, one merged list seems like the best responsive solution. And it doesn't really hurt the semantics of the list items in my case so I'll do this – Matt Aug 25 '13 at 21:59
1

You can't do that with two ul. However, you can put two span in each li.

Example:

HTML:

<div>
    <ul>
        <li><span class="left">Item A</span><span class="right">Item 1</span></li>
        <li><span class="left">Item B</span><span class="right">Item 2</span></li>
        <li><span class="left">Item C</span><span class="right">Item 3</span></li>
        <li><span class="left">Item D</span><span class="right">Item 4</span></li>
    </ul>
</div>

CSS:

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

span{
    width: 50%;
}


.left {
    float: left;
    background:blue;
}


.right {
    float: right;
    background:Red;
}


@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
        display:blocK;
    }
}

JSFiddle

Vucko
  • 18,882
  • 6
  • 54
  • 97