title: How to achieve the float:right effect while preserving the inline-block display?
body: <p>Consider the following jsFiddle: <a href="http://jsfiddle.net/mark69_fnd/yqdJG/1/" rel="noreferrer">http://jsfiddle.net/mark69_fnd/yqdJG/1/</a></p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="char"&gt;
          AAA
      &lt;/div&gt;
      &lt;div class="char stickToRight"&gt;
          BBB
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <h3>CSS:</h3>
  
  <pre><code>#container {
      border:solid 2px green
  }
  .char { 
      display: inline-block;
      border: solid 2px red;
  }
  .stickToRight {
      float: right
  }​
  </code></pre>
  
  <p>Is there another way to make <code>.stickToRight</code> be aligned right, <em>without floating it?</em></p>
  
  <p>I need to keep it as <code>display:inline-block</code> so that I can make its vertical alignment consistent with other <code>.char</code> elements.</p>
  
  <p>How can I achieve the <code>float:right</code> right-alignment effect, whilst keeping the element <code>display:inline-block</code>? (Note that I do not know the width of the container element.)</p>
  
  <p>I'd like purely CSS solutions, if there are any.</p>