title: How to align divs to look like a skype chat window?
body: <p>This is my first question here at Stack overflow and I hope that I have done everything right.</p>
  
  <p>I'm trying to position some divs to appear in the same way as a Skype chat window. There are multiple ways of align three divs, left, center right or two div's to the left, but I haven't found a way of align two divs to the right, side by side. Especially not if one of them doesn't have a fixed size.</p>
  
  <p>I have been able to position the incoming user's profile pic, chat bubble and time stamp but I haven't found a way of positioning the outgoing dito.</p>
  
  <p>I also admit that the code is quite messy right now because of all my attempts to get it right so i would really appreciate some help here that could put me on the right track.</p>
  
  <p>This chat window is an example of what I want to achive:
  <a href="http://i.stack.imgur.com/TyrLC.png" rel="nofollow">Skype chat window</a></p>
  
  <p>This is the html:</p>
  
  <p>Incoming messages:</p>
  
  <pre><code>&lt;div class="skype-parent"&gt;
  
  &lt;img class="skype-in-avatar" src="users_avatar.jpg alt="" /&gt;
  
  &lt;div class="skype-in-message"&gt;
  This is the incoming text.
  &lt;/div&gt;
  
  &lt;div class="skype-timestamp"&gt;
  08:42
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Outgoing messages:</p>
  
  <pre><code>&lt;div class="skype-parent"&gt;
  
  &lt;div class="skype-out-message"&gt;
  This is the outgoing text.
  &lt;/div&gt;
  
  &lt;div class="skype-timestamp"&gt;
  08:56&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css for parent div (works!):</p>
  
  <pre><code>div.skype-parent {
      text-align:         left;
      margin-top:         0.2em;
      margin-bottom:      0.2em;
      clear:              both; }
  </code></pre>
  
  <p>Css for timestamp div (works!):</p>
  
  <pre><code>div.skype-timestamp {
      text-align:         center;
      margin-top:         0.5em;
      float:              right; }
  </code></pre>
  
  <p>Css for incoming messages (works!):</p>
  
  <pre><code>img.skype-in-avatar {
      float:              left;
      width:              30px; 
      height:             30px;
      margin-left:        0.5em;
      margin-right:       0.5em;
      border-radius:      1.5em;      }
  
  
  div.skype-in-message {
      max-width:          75%;
      background-color:   #c7edfc;
      padding:            0.5em;
      border-radius:      10px;
      display:            inline-block;
      vertical-align:     bottom; }
  </code></pre>
  
  <p>CSS for outgoing messages (not working):</p>
  
  <pre><code>div.skype-out-message {
      max-width:          75%;
      background-color:   #e5f7fd;
      padding:            0.5em;
      border-radius:      10px; }
  </code></pre>
  
  <p>So, what I need help with here is the positioning code for this outgoing message. As seen in the example the chat bubble are positioned to the right, but still to the left of the timestamp.</p>