[Resolvido] Todo engloba float

Olá, estou com um problema, tenho a seguinte estrutura:

<div id="box">

 <div id="widget">

 <p>Conteudo...</p>

 </div>

 <div id="conteudo">

 <p>Conteudo...</p>

 </div>

</div>

CSS:

#widget, #conteudo{

 float: left;
 display: block;
}

o problema é que o #box não fica do tamanho do conteudo ou widget.

Gostaria que o #box acompanhase o #widget ou #conteudo.

Obrigado!