title: CSS: aligning elements inside a div
body: <p>I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right.</p>
  
  <p>So, I have something like:</p>
  
  <pre><code>#left-element {
      margin-left: 9px;
      margin-top: 3px;
      float:left;
      width: 13px;
  }
  
  #middle-element {
      margin:0 auto;
      text-align: center;
      width: 300px;
  }
  
  #right-element {
      float:right;
      width: 100px;
  }
  </code></pre>
  
  <p>My html looks like this: </p>
  
  <pre><code>   &lt;div id="container-div"&gt;
          &lt;div id="left-element"&gt;
              &lt;img src="images/left_element.png" alt="left"/&gt;
          &lt;/div&gt;
          &lt;div id="middle-element"&gt;
              I am the text inside the middle element
          &lt;/div&gt;
          &lt;div id="right-element"&gt;
              I am the text in right element
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>Thanks!</p>