Div 100% ancho (totalmente) ¿disparate o problema grave?

[hey_alan]

Es increíble como nunca lo había notado, pero en algunas webs con un div superior de supuestamente todo el ancho me ocurre el siguiente fenómeno:

Quiero que haya un div superior, digamos como un cabezal con un color de fondo que abarque toda la parte de arriba (div #top). Luego otro div con ancho especificado en px (#main) .

Un ejemplo sería el siguiente:

Código CSS:

Código:

body {
	background: #000000;
	margin:0; padding:0;
}

#top{background:#990000; height:120px;}

#main{
background:#0000FF;
width:740px;
margin: 20px auto;
color:#FFFFFF;
}

Código HTML:

Código HTML:

<div id="top"></div>
<div id="main">LOROLOROLOROLORO</div> 

Parecería que está todo bien, sin embargo al minimizar la ventana a un ancho en el que se deba hacer scroll horizonal por el div #main; el div de #top se queda en el ancho de la ventana y al hacer el scroll queda cortado.

Miren las imágenes:





¿Qué solución existe?

Muchas gracias de antemano.

[kseso?]

Hola Hey_alan

Disculpa, ando algo espeso y no se si te he comprendido bien.

Pero creo que si modificas tu css con lo resaltado en negrita harás lo que creo que quieres hacer ;)

body {
background: #000000;
margin:0; padding:0;
}

#top{background:#990000; height:120px;
width: 100%;
display: block;}

#main{
background:#0000FF;
width:740px;
margin: 20px auto;
color:#FFFFFF;
}

Un saludo

[Null_]

No es necesario que definas width:100%; ni width:100%;display:block; pues los divs tienen la caracteristica de ocupar todo el anchor disponible para presentar el contenido.
Entonces si no lo defines, tu scrollbar de abajo de la web nunca se mostrara.

Suerte :D

[kseso?]

Sí, ya se que los div son por definición elementos de bloque. Pero Hey_Alan muestra una porción muy pequeña de código, así que opto por una redundancia consciente, ya que redundancia no es sinónimo de error.

Según lo que creo haber entendido es que Hey_Alan desea que el #top tenga la misma anchura que la pantalla y de ahí mi respuesta indicando un width:100%, porque no es este div el que fuerza la aparición del escroll horizontal, sino el #main, que tiene definido "width: 740px", y es en ese momento cuando su #top no cubre toda la anchura, origen de su consulta.

[hey_alan]

Muchas gracias a ambos por sus respuestas.

Exacto, #main es el que provoca el scrollbar y al minimizar la ventana, #top sólo se ajusta al tamaño que le demos a ésta y no al completo que ocupa el documento con scroll.

El código que he puesto es un ejemplo, pero completo... es decir, pónganlo en un nuevo html y les dará el error.

Recorcholis... no encuentro ningún método para solucionarlo x_x

Saludos.

[Mikmoro]

Pues aunque no imagino el origen del error, sí se me ocurre cómo solucionarlo: pon a la cabecera el mismo ancho que al cuerpo (740), y listo (creo).

[hey_alan]

Gracias por la respuesta.

El problema es que quiero que (en efecto) cubra todo el documento al 100%, como cualquier cabezal con color de fondo.

He encontrado un tema similar:

http://www.forosdelweb.com/f53/capas...ra-pie-460979/

Sin embargo tampoco dieron con la solución...

[Mikmoro]

Ah, de acuerdo, no había etendido qué era lo que querías hacer.

Para todos excepto para IE se soluciona fácil, añadiendo un min-width de 740px:

min-width: 740px;

Me temo que para IE habrá que usar un width:expression de esos par dar un ancho mínimo.

<!--[if IE 6]><style>#top {width:expression(
(document.documentElement.clientWidth < 740)? "740px" : "auto"
);}</style><![endif]-->

[hey_alan]

LOL

Como siempre, IE arruina la diversión...

De cualquier manera, cualquier usuario que aún lo use no merece mi atención xD.

Muchas gracias!