How to create a block div that fits content width?

Question

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.

Answer 1

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:

CSS

#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;
}

HTML

Some content above div

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

Some content below div

DEMO

Answer 2

Use flex box:

.holder{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.item{
  border:1px solid red;
  margin:10px;
  padding:10px;
}

<div class="holder">
  <div class="item">
    Item has a lot of text
  </div>
  <div class="item">
    Small
  </div>
  <div class="item">
    Very big and wide with lots of content
  </div>
</div>