Problem with CSS floated lists - one long item 'filling two rows'
On the enclosed screenshot is floated list with one item with long description, which pushes first item on next line one position to the right. I don't want that.

Is there some trick/css directive/layout, that will push the next line lower, so the line can be filled and all the items will be in one line?

I can generate `clear: left;` on every (n/3)+1-child, but I think there is some pure CSS solution, just can't seem to find it anywhere today.

I'm tired and somewhat slow today. Thank you.

SCREENSHOT:

![Screenshot][1]

HTML:

    <ul id="photos"> 
    <li> 
      <a href=".."> 
        <img src=".." alt="" height="160" width="160"/><br> 
        Vianočný koncert - Zohor 2009
        <span class="nr">61</span> 
      </a></li> 
    <li> 
      <a href=".."> 
        <img src=".." alt="" height="160" width="160"/><br> 
        Koleda 2009
        <span class="nr">1</span> 
      </a></li> 
    <li> 
      <a href=".."> 
        <img src=".." alt="Advent 2009" height="160" width="160"/><br> 
        Čejkovice 2009
        <span class="nr">15</span> 
      </a></li> 
    <li> 
      <a href=".."> 
        <img src=".." alt="" height="160" width="160"/><br> 
        Marianka 2009
        <span class="nr">6</span> 
      </a></li> 
    </ul>

CSS:

    #photos li {
      display:block;
      float:left;
      position:relative;
    }
    #photos li a {
      text-decoration:none;
      display:block;
      padding:10px 10px 20px;
      cursor:pointer;
      width:160px;
      text-align:center;
    }
    #photos li a img {
      cursor:pointer;
      display:inline-block;
    }


  [1]: http://i.stack.imgur.com/YbdGQ.png
Problem with CSS floated lists - one long item 'filling two rows'
===

On the enclosed screenshot is floated list with one item with long description, which pushes first item on next line one position to the right. I don't want that.

Is there some trick/css directive/layout, that will push the next line lower, so the line can be filled and all the items will be in one line?

I can generate `clear: left;` on every (n/3)+1-child, but I think there is some pure CSS solution, just can't seem to find it anywhere today.

I'm tired and somewhat slow today. Thank you.

SCREENSHOT:

![Screenshot][1]

HTML:

    <ul id="photos"> 
    <li> 
      <a href=".."> 
        <img src=".." alt="" height="160" width="160"/><br> 
        Vianočný koncert - Zohor 2009
        <span class="nr">61</span> 
      </a></li> 
    <li> 
      <a href=".."> 
        <img src=".." alt="" height="160" width="160"/><br> 
        Koleda 2009
        <span class="nr">1</span> 
      </a></li> 
    <li> 
      <a href=".."> 
        <img src=".." alt="Advent 2009" height="160" width="160"/><br> 
        Čejkovice 2009
        <span class="nr">15</span> 
      </a></li> 
    <li> 
      <a href=".."> 
        <img src=".." alt="" height="160" width="160"/><br> 
        Marianka 2009
        <span class="nr">6</span> 
      </a></li> 
    </ul>

CSS:

    #photos li {
      display:block;
      float:left;
      position:relative;
    }
    #photos li a {
      text-decoration:none;
      display:block;
      padding:10px 10px 20px;
      cursor:pointer;
      width:160px;
      text-align:center;
    }
    #photos li a img {
      cursor:pointer;
      display:inline-block;
    }


  [1]: http://i.stack.imgur.com/YbdGQ.png