title: Align 2 images, one to right other to left inside div
body: <p>I have a  in my webpage which carries 2 images. I want one image to be aligned left and other to the right end of the division.</p>
  
  <p>The <a href="http://jsfiddle.net/NbekW/" rel="noreferrer">JsFiddle</a></p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
  &lt;img id ="ttl" src="Home_files/images/ttl.png"&gt;
  &lt;img id ="se" src="Home_files/images/se.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:  </p>
  
  <pre><code>.header {
  position: relative;
  top: 0%;
  height: 20%;
  }
  /*Header CSS*/
  img#ttl {
  position: relative;
  top:50%;
  height: 50%;
  left: 0px;
  }
  img#se {
  position: relative;
  top:60%;
  height:30%;
  vertical-align:right;
  margin-right: 2%;
  }
  </code></pre>
  
  <p>PS: I tried <code>float:right;</code>. Its works in in Chrome and FF but not in IE.
  And ofcourse this div has a parent div. But I don't think that will be a problem.</p>