Div width = 100%?

Question

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

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

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

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

So why the outer div is always 100% wide? And how to fix that? I was trying with display: inline, but it sets 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 can't set outer div width (width: xxxpx) because all the content is dynamically created.

Answer 1

It sounds like you need to read the Visual Formatting Model.

display: block; causes block-level items to automatically fill their parent container.

CSS is designed in a way that lends itself to the child elements filling their parents, rather than the parents conforming to the children.