title: :last-child vs specific specific id's
body: <p>I don't understand why these two examples behave differently. The objective of the HTML and CSS is simply to align the divs horisontally and let the last div (to the right) take up the remaining space (remaining width of container).</p>
  
  <p><strong>using specific id for right item:</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #left {
      float: left;
      padding: 0 1cm;
      background-color: #ff0000;
  }
  #right {
      width: 100%;
      background-color: #00FF00;
  }
  &lt;/style&gt;
  &lt;div&gt;
      &lt;div id="left"&gt;item 1&lt;/div&gt;
      &lt;div id="left"&gt;item 2&lt;/div&gt;
      &lt;div id="right"&gt;last&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>using :last-child:</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #left {
      float: left;
      padding: 0 1cm;
      background-color: #ff0000;
  }
  #left:last-child {
      width: 100%;
      background-color: #00FF00;
  }
  &lt;/style&gt;
  &lt;div&gt;
      &lt;div id="left"&gt;item 1&lt;/div&gt;
      &lt;div id="left"&gt;item 2&lt;/div&gt;
      &lt;div id="left"&gt;last&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>