title: How do I keep a DIV from expanding to take up all available width?
body: <p>In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the <em>right</em> way?</p>
  
  <p><strong>Edit:</strong> One answer suggests I turn off "display:block" -- but this causes the rendering to look malformed in every browser I've tested it in. Is there a way to get a nice-looking rendering with "display:block" off?</p>
  
  <p><strong>Edit:</strong> If I add "float: left" to the pictureframe and "clear:both" to the P tag, it looks great. But I don't always want these frames floated to the left. Is there a more direct way to accomplish whatever "float" is doing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pictureframe {
    display: block;
    margin: 5px;
    padding: 5px;
    border: solid brown 2px;
    background-color: #ffeecc;
  }
  #foo {
    border: solid blue 2px;
    float: left;
  }
  img {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="foo"&gt;
    &lt;span class="pictureframe"&gt;
         &lt;img alt=''
          src="http://stackoverflow.com/favicon.ico" /&gt;
    &lt;/span&gt;
    &lt;p&gt;
      Why is the beige rectangle so wide?
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>