Div ancho = 100%?

Tengo contenido JS generado y quiero un div EXACTAMENTE a su alrededor.

No sé por qué, pero el padre div siempre tiene un ancho del 100%.

Pensé que tenía div ancho: 100% en algún lugar, pero sorprendentemente se ve casi igual en jsfiddle:

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

Entonces, ¿por qué div exterior es siempre 100% de ancho? ¿Y cómo arreglar eso? Lo estaba intentando con display: en línea, pero establece ancho a 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:

 

I don't know where "outer" div 100% width comes from?

Something big!

I always thought it'd look like that:

No puedo establecer el ancho div externo (ancho: xxxpx) porque todo el contenido se crea dinámicamente.

Parece que necesita leer el Modelo de formato visual .

display: block; hace que los artículos de nivel de bloque llenen automáticamente su contenedor primario.

CSS está diseñado de una manera que se presta a los elementos secundarios que llenan a sus padres, en lugar de a los padres que se ajustan a los niños.

div es un elemento de bloque. Los elementos de bloque tienen un ancho del 100% del elemento principal, si no se especifica el ancho.

está ocupando todo el espacio disponible basado en su contenedor padre, exactamente lo que se supone que debe hacer. Si quieres que sea un ancho específico, establece el ancho :; del elemento.

Si encuentra la documentación de w3.org un poco seca o demasiado técnica, aquí hay una explicación más accesible del modelo de caja de CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/ Introduction_to_the_CSS_box_model