title: CSS: Align even elements
body: <p><a href="http://jsfiddle.net/JLkMa/" rel="nofollow">Here is my layout</a>. I have a container 508px wide with divs inside. I want to align left column (odd divs) to the left, and right column to the right. I tried <code>nth-child(even)</code> - but it doesn't adjust the right margin. One- Why doesn't it work? Two - is there a more elegant solution to this?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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 &gt; div {
      float:left;
      margin: 0 30px 30px 0;
      text-align: center;
  }
  #products &gt; div:nth-child(even) {margin: 0 0 30px 0;background-color:#CCC;}
  #products a {font-weight:normal;}
  #products img {
      width:224px;
      height:120px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="products" class="clearfix"&gt;
          &lt;div&gt;
              &lt;div&gt;&lt;a href=""&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div&gt;&lt;a href=""&gt;Product 1&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div&gt;&lt;a href=""&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div&gt;&lt;a href=""&gt;Product 2&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div&gt;&lt;a href=""&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div&gt;&lt;a href=""&gt;Product 3&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div&gt;&lt;a href=""&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div&gt;&lt;a href=""&gt;Product 4&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div&gt;&lt;a href=""&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div&gt;&lt;a href=""&gt;Product 5&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;                    
      &lt;/div&gt;
  </code></pre>