How to create a block div that fits content width?

I have a div that contains a fixed width content (image inside another div) and a variable width content (text that changes dynamically). I need this outer div to:

• start from a new line
• be exactly as wide as its content
• preferably end in a new line

Because it should be the only element on the line, I can not use display:inline or display:inline-block. On the other hand, display:block does not auto-shrink. Here is my code:

http://jsfiddle.net/D9QV9/

My experiments with overflow, float and clear yielded no result. Any help, advice, link etc is very welcome. Thank you.

#outer {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    display: block;
    height: 50px;
    display: block;
}

#image {
    float: right;
    width: 50px;
}

Content above div
<div id="outer">Text inside div<div id="image">IMG</div></div>
Content below div

This is how I did: I gave #outer the CSS-style display:inline-block and then simply put that in another div with the css display:block to make sure that #outer stayed on a separate line:

#outer {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  height: 50px;
  width: auto;
  display: inline-block;
}

#image {
  float: right;
  width: 50px;
}

#element_block {
  display: block;
}

<div id="element_block">
  <div id="outer">
    Text inside div
    <div id="image">IMG</div>
  </div>
</div>

DEMO