CSS: ¿Cómo funciona el ancho como un porcentaje?

Question

Tengo lo que creo que es un problema extraño. Tengo un div, dentro de un div principal, y le estoy dando al niño div un ancho del 100%, pero no está creciendo hasta el tamaño del div principal.

El elemento primario div no tiene un ancho establecido de cualquier tipo. Entonces mi pregunta: ¿el ancho en porcentaje solo funciona cuando un elemento padre tiene un ancho establecido, o debería crecer de todos modos?

ACLARACIÓN:

Algunos pueden preguntarse cómo el div padre tiene un ancho de crecer a en absoluto, si él mismo no tiene un ancho establecido. La razón es que tengo otros hermanos del elemento secundario dentro del div principal, con un ancho establecido para ellos, por lo que el div principal ha crecido para cumplir con el ancho de los hermanos.

CÓDIGO DE MUESTRA:

<div id="parent-div"> 
    <div id="child-element" style="width: 100%">Content</div> 
    <div id="sibling" style="width: 250px"></div> 
</div> 

Elemento hijo no está creciendo para satisfacer el div padre. El ancho del 100% esencialmente no está haciendo absolutamente nada de lo que puedo decir. Esto está en IE7.

Gracias.

SEGUIMIENTO: Gracias a todos por las respuestas. Estoy ocupado probando por mi parte. Originalmente pensé que los padres div solo crecen tanto como sus hijos, pero resultó que estaba equivocado dado mi ejemplo anterior, que codifiqué solo para demostrar mi problema. En mi caso, mi div padre tiene un position: fixed y bottom: 1px y right: 1px aplicados. De mis pruebas, esto parece cambiar el comportamiento del div principal. Ya no se extiende automáticamente a todo el ancho de la página, sino que asume el comportamiento que yo creía que era el caso de todos modos, que es el div principal se expande solo lo suficiente para dar cabida a su hijo más amplio. Así que ese es el comportamiento que estoy viendo ahora, pero solo porque mi div padre tiene una posición fija.

Answer 1

Esto es en realidad un truco de CSS. Funciona de la siguiente manera:

Si establece la posición div primaria en relativa y la posición div secundaria en absoluta, entonces las divisiones secundarias permanecerán dentro del div principal aunque su posición sea absoluta.

Para más información, ver: Absolute Positioning Inside Relative Positioning.

Gracias

Answer 2

Esta pantalla se explica cómo se miden las métricas con CSS. Disculpe a los franceses, es de mi computadora.

padding, margin and border http://img524.imageshack.us/img524/5211/capturedcran20100204173.png

Donde "marge" significa margin, "bordura" significa border y "espacement" significa padding. Margin cae alrededor del border, que a su vez cae alrededor del padding, que a su vez cae alrededor del tamaño real del elemento. En este ejemplo (que se tomó inspeccionando la etiqueta de respuesta de desbordamiento de pila <textarea>) se muestra que no hay margen, el borde es 1px de ancho, y hay un relleno de 3px entre el borde de <textarea> y su contenido; y el tamaño que puede usar el contenido, excluyendo el relleno, es 660x200. Este tamaño coincide con las propiedades CSS width y height.

Desde un elemento anidado, solo puede ocupar el tamaño del elemento real. Padding en el padre hará que sus elementos anidados mantengan un margen. Eso significa que aún puede haber espacio entre el borde de su anidado y el borde de su elemento primario.

Si desea que su anidado <div> tomar todo el espacio que puede, debe establecer su propiedad margin a 0px, y la propiedad padding de su padre para 0px también.

Answer 3

Sin haber visto el resto de su CSS y HTML, voy a suponer que lo que ha publicado es todo lo que hay en su HTML y CSS.

En ese caso:

• padre-div definitivamente será tan amplia como la página, es decir, el 100%.
• niño-elemento también será tan ancha como la página, es decir, 100%, y estar dentro de padre-div
• hermano tendrá una anchura de 250 píxeles y ser debajo niño-elemento

Si esto es no es el caso, tienes otro HTML o CSS interfiriendo.

Answer 4

Como zneak señaló, no olvide restablecer el modelo de caja css; ver this great article on understanding the box model.

#parent div { 
    padding: 0; 
    margin: 0; 
} 

Sólo para señalar, no se olvide de establecer

#child-element { 
    display: block; 
} 

como lo haya establecido a línea una que no se ampliará a 100% de la anchura de los padres.

No pude replicar su problema, todo funcionó bien.