title: How to align 2 images side by side with 1 floating to the left and the other to the right?
body: <p>This is the problem I am having: I am able to align 2 images side by side, but I would like it, if 1 of them is floating to the left and the other to the right.</p>
  
  <p>If someone can make an example of it, I will appreciate it very much.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="image123"&gt;
      &lt;div class="imageContainer"&gt;
          &lt;img src="../images/over_mijzelf.gif" height="188" width="600" /&gt;
          &lt;p&gt;#&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="imageContainer"&gt;
          &lt;img class="middle-img" src="../images/mijn_hond.gif"/ height="188" width="600" /&gt;
          &lt;p&gt;#&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>&lt;style&gt;
  .imageContainer {
      float: left;
  }
  .imageContainer {
      float: right;
  }
  
  p {
      text-align: center;
  }
  &lt;style/&gt;
  </code></pre>