title: Placing to table div and inline-block div next to each other
body: <p>I'd like to place two divs next to each other. The first of them is displayed as a table and other one is an inline div. Here is some code: <a href="http://jsfiddle.net/WcHEc/" rel="nofollow noreferrer">http://jsfiddle.net/WcHEc/</a></p>
  
  <p>And also inline code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="message-container"&gt;
      &lt;div class="img-rounded small"&gt;
          &lt;div class="img-centered-wrapper"&gt;
              &lt;img src="/static/img/avatar" class="img-animal" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="message-content"&gt;
          &lt;p&gt;&lt;strong&gt;Some title&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;Some content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.message-container {
      clear: both;
      display: inline-block;
  }
  .message-container .right {
      float: right;
      text-align: right;
  }
  .img-rounded {
      border: 1px solid #000;
      border-radius: 7px;
      display: table;
      float: left;
      height: 50px;
      width: 50px;
      margin-right: 15px;
      overflow: hidden;
  }
  .img-centered-wrapper {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }
  .message-content {
      display: inline-block;
      float: right;
  }
  .img-animal {
      max-height: 45px;
      max-width: 45px;
  }
  </code></pre>
  
  <p>I'd like div "message-content" to be always displayed on the right of a div "img-rounded". But when there is too much content in "message-content" then it's displayed below. I'm struggling with it for some time and have no idea how to make it work.
  I'd very glad for any help.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Thank you for you answers! It helped me to figure out what was the problem. </p>
  
  <p>I didn't set width and height, because my idea was that <code>.message-container</code> will fit to its content, because I'm using border on it. </p>
  
  <p>So instead of setting <code>inline</code> and fixed width, I keep displaying it as an <code>inline-block</code> and also I set <code>max-width</code> to <code>.message-content</code>. Here is a little bit bigger piece of code: <a href="http://jsfiddle.net/RpZcT/" rel="nofollow noreferrer">http://jsfiddle.net/RpZcT/</a>. </p>
  
  <p>Do you have any idea how to achive the same effect with using <code>inline</code> instead of <code>inline-block</code>? As it was mentioned, <code>inline-block</code> may cause unexpected behaviour.</p>