css ancho div 100% no ocupa todo el ancho del elemento principal

Tengo dos divisiones en una página. un contenedor de cuadrícula que toma un fondo y una cuadrícula interna que necesita colocarse en el centro de la otra cuadrícula. Mi css:css ancho div 100% no ocupa todo el ancho del elemento principal

html, body{ 
    margin:0; 
    padding:0; 
    width:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    width:100%; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

En este punto, la imagen bg de la # rejilla-contenedor sólo llena la ventana, no el ancho completo de la html. El síntoma de esto es que si restringe la ventana del navegador para que se requiera una barra de desplazamiento horizontal y actualiza la página, la imagen bg finaliza donde termina la ventana del navegador. Cuando me desplazo hacia la derecha, la imagen bg no está allí. Ideas?

EDIT: ok, por solicitudes, he editado mi css/html. Cuando elimino la designación de ancho en el contenedor de cuadrícula #, se reduce al ancho del contenedor interno, lo que es aún peor. Esto es lo que tengo ahora:

html, body{ 
    margin:0; 
    padding:0; 
    min-width:1140px; 
} 
body{ 
    background:url(../images/page-background.jpg) repeat-x top left !important; 
    height:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    padding-top:1px; 
} 
#grid-container2{ 
    width:1140px; 
    margin:0px auto; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

y el html:

<!DOCTYPE HTML> 
<html> 
<head> 
--- 
</head> 

<body> 
... 
<div id="grid-container" class="clearfix"> 
<div id="grid">..all kinds of things in here</div> 
</div>

Fuente

2011-08-24 panzhuli

¿Puede añadir su HTML por favor? –

Eso es lógico. Le dice al navegador que configure el ancho para que sea el 100% del navegador. – Luuk

Elimina el ancho: 100% y debería ser el truco. http://www.impressivewebs.com/width-100-percent-css/ –

El problema se debe a que su #grid tiene un width:1140px.

Debe establecer un min-width:1140px en el body.

Esto evitará que el body se vuelva más pequeño que el #grid. Elimine width:100% ya que los elementos de nivel de bloque ocupan el ancho disponible de forma predeterminada. Ejemplo en vivo: http://jsfiddle.net/tw16/LX8R3/

html, body{ 
    margin:0; 
    padding:0; 
    min-width: 1140px; /* this is the important part*/ 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

Fuente

2011-08-24 15:12:07 tw16

por alguna razón, el # grid-container aún necesitaba el ancho: 100%. No estoy seguro por qué, pero ahí tienes. ¡Gracias! – panzhuli

"Eliminar ancho: 100% ya que los elementos de nivel de bloque ocupan el ancho disponible de forma predeterminada". - gracias solo la conferencia que estaba buscando –

Retire los width:100%; declaraciones.

Los elementos del bloque deberían ocupar todo el ancho disponible de forma predeterminada.

Fuente

2011-08-24 15:04:23 Geert

¡Es cierto, gracias! – RynoRn

html, body{ 
    width:100%; 
}

Esto le dice al html que sea 100% ancho. Pero el 100% se refiere al ancho total de la ventana del navegador, por lo que no es más que eso.

Es posible que desee establecer un ancho mínimo en su lugar.

html, body{ 
    min-width:100%; 
}

Así que será 100% como mínimo, bot más si es necesario.

Fuente

2011-08-24 15:04:33

css ancho div 100% no ocupa todo el ancho del elemento principal

Respuesta

Cuestiones relacionadas