Div width = 100%?

I have JS generated content and want the div to EXACTLY around it.

I don’t know why, but the div parent is always 100%.

I thought I had a div width: 100% somewhere, but surprisingly it looks almost the same in jsfiddle:

http://jsfiddle.net/f2BXx/2/

So why is the outer div always 100%? And how to fix it? I tried with the display: inline, but it sets the width to 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>

I cannot set the outer width of the div (width: xxxpx) because all content is dynamically created.