¿Por qué el div posicionado no se expande?

Tengo un div con position:absolute, left:0, right:0; widht:100%. Esto está bien con mi código. Pero cuando agregué otro div, que tiene width:2000px; mi primer ancho div no se está expandiendo. ¿Puede por favor sugerirme?

Este es mi ejemplo. http://jsfiddle.net/vYhv4/

Muchas Gracias

preguntado el 09 de marzo de 12 a las 14:03

¿Cómo se ve el css? es difícil brindar asistencia si no sabemos lo que tiene actualmente. Si no tiene desbordamiento: especificado en el CSS, intente configurarlo. -

4 Respuestas

El position:absolute La propiedad posiciona el elemento en relación con su elemento antepasado, en su caso, ese es el body del documento, que no es el ancho de su .displayElement clase. Una cosa que puede hacer para arreglar esto es contener tanto su .displayElement clase y su div absolutamente posicionado, .box, dentro de un contenedor que está claro que actúa como el antepasado de su .box div, posicionado relativo.

Al igual que:

HTML

<div class="element-container">
    <div class="box">test</div>
    <div class="displayElement">
        flash slider comes here
    </div>
</div>

CO

.element-container:before, .element-container:after {
    content:"";
    display:table;
}

.element-container:after {
    clear:both;
}

.element-container {
    zoom:1; /* ie  hasLayout fix */
    position:relative;
    display:inline-block;
}

Demo

respondido 09 mar '12, 14:03

Sus soluciones son excelentes. pero una duda más... cuando apliqué a width:500px;overflow:auto; a element-container, ¿por qué de nuevo el box div no se expande en este caso? - Pavan Kumar

@PavanKumar Tienes que recordar que el element-container div solo actúa como un contenedor div que está posicionado relativo para que su box div puede expandir el ancho de su displayElement div, entonces donde realmente debería agregar el ancho es en ese elemento, displayElement. Si establece un ancho en el contenedor div, ese es el ancho que el box div recogerá. - Andrés Ilich

Entonces, en ese caso, ¿no podemos hacer nada? - Pavan Kumar

@PavanKumar ¿Algo como en qué? ¿Cuál es tu resultado deseado? si agregas width:500px de las personas acusadas injustamente llamadas element-container div, y su displayElement div se extiende más allá porque su ancho se establece en 2000px, ¿todavía estás esperando tu box div para expandirse al ancho de su displayElement div independientemente del ancho que le des a su contenedor? ¿Qué esperas exactamente que suceda? - Andrés Ilich

@PavanKumar Agregó un color de fondo al element-container regla para ilustrar cómo está cubriendo sus divs: jsfiddle.net/vYhv4/7 .. intente reducir el ancho de su displayElement div para que pueda ver por qué se está utilizando. - Andrés Ilich

El primer div solo se expandirá al ancho del área visible, no se expandirá más allá de eso hasta que especifique un ancho mayor.

respondido 09 mar '12, 14:03

Supongo que esto se debe a que .box se está alineando con el cuerpo. Sin embargo, el cuerpo es 100 % ancho y no crece cuando .displayElement se vuelve más ancho que la ventana gráfica.

¿Hay alguna razón por la que no pueda establecer el ancho de .box en 2000px también?

respondido 09 mar '12, 14:03

Ese propósito de .box es diferente para mi requerimiento. Así que no puedo dar 2000px. En realidad no daré los 2000px. se lleva con mi foto. Algunas imágenes también pueden tener de 200 px a 3000 px. - Pavan Kumar

Es posible que su contenedor principal tenga un ancho establecido que sea más pequeño que su elemento de 2000 px. Creo que como tiene su div absolutamente posicionado con izquierda y derecha siendo 0, su ancho será el ancho de su contenedor principal. ancho: 100% no expandirá su contenedor al ancho de los contenedores secundarios sino al principal.

respondido 09 mar '12, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.