title: reduce div-width to its content width or to the width of content above/below
body: <p>If you would take a look at this jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/v5GXT/1/" rel="nofollow">http://jsfiddle.net/v5GXT/1/</a></p>
  
  <pre><code>&lt;div class="text"&gt;
      &lt;div id="image"&gt;this is an image with unknown width&lt;/div&gt;
      This is some text above,This is some text above,This is some text above,This is some text above,This is some text above,This is some text above,
      &lt;div class="code"&gt;special content&lt;/div&gt;
      and this is some text below,and this is some text below,and this is some text below,and this is some text below,and this is some text below,
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.text{
      color:red;
      text-align:justify;
      margin-top:20px;
  }
  
  .code{
      border:1px solid blue;
      border-left:10px solid #ccc;
      background:#eee;
      padding:5px;
      margin:5px;
  }
  .code:before{
      display:block;
      font-size:80%;
      font-style:italic;
      content:"Example:";
      margin-bottom:5px;
  }
  
  #image{
      float:right;
      border:2px solid red;
      height:150px;
      width:150px;
      margin-left:40px;
  }
  </code></pre>
  
  <p>I want the blue div box (special content) to be the same width as the text above/below, or the width of its content, whatever is easier. Why at all is this div as width as the screen?</p>
  
  <p>Any suggestions what's the best way?</p>
  
  <p><br><br><br><br></p>
  
  <p>Edit1:
  easy solution with overflow:
  <a href="http://jsfiddle.net/v5GXT/6/" rel="nofollow">http://jsfiddle.net/v5GXT/6/</a></p>
  
  <pre><code>.code{
      border:1px solid blue;
      border-left:10px solid #ccc;
      background:#eee;
      padding:5px;
      margin:5px;
      overflow-x: hidden;
  }
  </code></pre>