title: Align three images to spread across the page evenly
body: <p>I have one 'main' div that that is wrapped around three child div's. Each child div holds an image. My goal is for the three images to be evenly aligned across my page. The images are all the same size (200px by 166px). If there is some way to do this without the use of a dozen div's that would be superb. To reiterate my question, I do NOT want all three images centered. I want the left img to be 30 pixels from the left of the page; the right img to be 30 pixels from the right of the page, and I want the center img to be perfectly centered between the two.</p>
  
  <h3>
  HTML:
  </h3>
  
  <pre><code>    &lt;div id="aboutimages"&gt;
          &lt;div id="aboutimgleft"&gt;
              &lt;img src="Stylesheets/images/manpc.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div id="aboutimgcenter"&gt;
              &lt;img src="Stylesheets/images/coffee.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div id="aboutimgright"&gt;
              &lt;img src="Stylesheets/images/keyboard.jpg" alt="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <h3>
  CSS:
  </h3>
  
  <pre><code>#aboutimages{
  text-align: center;
      width: 100%;
      margin: 0 auto;
      float:left;
      }
  
  #aboutimgleft img{
      float:left;
      padding-bottom:20px;
      padding-top:20px;
      padding-left:0px;
      width:250px;
  } 
  
  #aboutimgcenter {
      margin: 0 auto; 
      width: 70%;
  }
  
  #aboutimgcenter img{
      text-align:center;
      width:250px;
      height:166px;
      padding-bottom:20px;
      padding-top:20px;
  }
  
  #aboutimgright img{
      float:right;
      padding-bottom:20px;
      padding-top:20px;
      padding-right:0px;
      width:250px;
      height:166px;
  } 
  </code></pre>
  
  <p>I am desperate for any type of help - this is frustrating the living hell out of me.</p>
  
  <p>Thanks,</p>
  
  <p>Evan</p>