title: Align Images Left & Right using CSS
body: <p>I've got a very basic page that looks like this :
  <strong><a href="http://jsfiddle.net/8dnZQ/" rel="nofollow">JSFiddle - DEMO</a></strong></p>
  
  <p>Currently the image is centred on the wrapper 'Blue' DIV. This 'blue' DIV is centred on the page and needs to remain so.</p>
  
  <p>What I'd like is to be able to have the 1st image aligned with the left edge of the DIV highlighted in Blue and then be able to put an image aligned to the right edge of the same Blue DIV.</p>
  
  <p>I found a post on here that used this code :</p>
  
  <pre><code>div.wrap {
      width: 600px;
      border: 1px solid #f00;
      height: 300px;
      position: relative;
  }
  
  .wrap img {
      border: 1px solid blue;
       position: absolute;
      bottom: 0;
  }
  
  .wrap img:nth-of-type(1) {
      left: 0;
  }
  
  .wrap img:nth-of-type(2) {
      right: 0;
  }
  </code></pre>
  
  <p>But that just seems to line up with the main container DIV, not the Blue DIV..</p>
  
  <p>How can I do this properly ?</p>
  
  <p>Thanks :)</p>