CSS: Совместить даже элементы

Question

Here is my layout. У меня есть контейнер шириной 508 пикселей, внутри которого есть div. Я хочу выровнять левый столбец (нечетные div) слева и правый столбец вправо. Я пробовал nth-child(even) - но он не корректирует правильный запас. Один - Почему это не работает? Два - есть ли более элегантное решение?

CSS

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 


#products {width:508px;background-color:#FFC;} 
#products > div { 
    float:left; 
    margin: 0 30px 30px 0; 
    text-align: center; 
} 
#products > div:nth-child(even) {margin: 0 0 30px 0;background-color:#CCC;} 
#products a {font-weight:normal;} 
#products img { 
    width:224px; 
    height:120px; 
} 

HTML

<div id="products" class="clearfix"> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 1</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 2</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 3</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 4</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 5</a></div> 
     </div>      
    </div> 

Answer 1

Вы пробовали сделать четные дивы плавать правильно?

Как это:

#products > div:nth-child(even) {margin: 0 0 30px 0;background-color:#CCC; float: right;} 

Fiddle