Eu tenho JS gerado conteúdo e quero um div exatamente em torno dele.

Não sei por que, mas o pai div sempre tem 100% de largur

Pensei ter div width: 100% em algum lugar, mas surpreendentemente parece quase o mesmo em jsfiddle:

http: //jsfiddle.net/f2BXx/2

Então, por que a div externa é sempre 100% de largura? E como consertar isso? Eu estava tentando com display: inline, mas define a largura como 0px; /

CSS:

.outer {
    border: solid 1px red;
}

.item {
    height: 300px;
    width: 400px;
    border: solid 1px blue;
}

.allright {
    height: 300px;
    width: 400px;
    border: solid 1px blue;
    outline: solid 1px red;
}

HTML:

<p>I don't know where "outer" div 100% width comes from?</p>

<div class="outer">
 <div class="item">
     <p>Something big!</p>
 </div>
</div>

I always thought it'd look like that:

<div class="allright"></div>

Não consigo definir a largura da div externa (largura: xxxpx) porque todo o conteúdo é criado dinamicament