DIV が拡張して利用可能な幅をすべて占有しないようにするにはどうすればよいですか? 質問する

次のHTMLでは、画像の周りのフレームがぴったり合うようにしたいのですが、親コンテナの幅をすべて占めて伸びてしまうのは避けたいです。これを行うにはいくつかの方法があることは知っていますが（手動で幅を特定のピクセル数に設定するなど、ひどい方法も含む）、右方法？

編集：ある回答では、「display:block」をオフにすることを提案していますが、これにより、テストしたすべてのブラウザーでレンダリングが不正な形式で表示されます。「display:block」をオフにして見栄えの良いレンダリングを取得する方法はありますか?

編集：ピクチャフレームに「float: left」を追加し、P タグに「clear:both」を追加すると、見栄えが良くなります。しかし、これらのフレームを常に左にフロートさせたいわけではありません。「float」の機能をより直接的に実現する方法はありますか?

.pictureframe {
  display: block;
  margin: 5px;
  padding: 5px;
  border: solid brown 2px;
  background-color: #ffeecc;
}
#foo {
  border: solid blue 2px;
  float: left;
}
img {
  display: block;
}

<div id="foo">
  <span class="pictureframe">
       <img alt=''
        src="http://stackoverflow.com/favicon.ico" />
  </span>
  <p>
    Why is the beige rectangle so wide?
  </p>
</div>