Div dentro de scroll

karlic0s · #1 (**permalink**) 05/05/2011, 12:18

Hola que tal, llevo como 3horas dandole vueltas y probando una página bastante compleja en cuanto a maquetación y me he topado con un problema que no logro solucionar.

Tengo lo siguiente:

Código HTML:

<html> 

<head> 
<style type="text/css" media="screen"> 

.content { 
position: absolute;
height:100%;
width: auto;
max-width: 100%;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
} 

div.content span.content2 { 
   width: 300px;
   height: 100%;
   display: inline-block;
   border-left: 1px solid black;
} 

</style> 
</head>

<body>

<div class="content"> 
<span class="content2"> 
1
</span>
<span class="content2"> 
2
</span>
<span class="content2"> 
3
</span>
<span class="content2"> 
4
</span>
<span class="content2"> 
5
</span>
<span class="content2"> 
6
</span>
</div> 

</body>
</html>

Esto funciona. El scroll solo sale dentro del div horizontalmente que ocupa el ancho completo de la pantalla con los span alineados SOLO en horizontal, mi problema es que necesito que en vez de spans sean divs ya que dentro de esos spans actuales donde pone (1 2 3...) tengo que maquetar otros divs en posicion relativa y claro, poner divs en vez de span en el puñetero IE no funciona (chrome y ff si), además he intentado maquetar dentro de los spans, pero tampoco funciona.

¿Alguien ha trabajado o sabe como trabajar con divs dentro de divs con scroll? ¿O alguién sabe como maquetar dentro de spans de una manera que funcione?

Gracias y un saludo

elbuensaint · #2 (**permalink**) 05/05/2011, 13:30

lo que quieres hacer es una web horizontal?
Si es asi, no le veo el caso de usar overflow en el div, solo necesitas definirle el ancho al div principal. Como tienes 6 span/divs de 300px, el ancho del div content será de 1800px, con esto el mismo navegador creará el scroll horizontal. De la forma que lo haces crea un doble scroll horizontal en netbooks, donde la resolución es menor.

La verdad no entendí muy bien cual es tu problema, tal vez si pusieras el código completo que estás usando podría ayudarte mejor, pero prueba lo que te digo arriba, tal vez esa sea la solución :P

seocusco · #3 (**permalink**) 05/05/2011, 13:30

pues la mayor parte se puede arreglar poniendo el encabezado para que IE trabaje con estandares

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css" media="screen"> 
body {
    margin:0px;
}
.content { 
position: absolute;
height:100%;
width: auto;
max-width: 100%;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
} 
 
div.content div.content2 { 
   width: 300px;
   height: 100%;
   display: inline-block;
   border-left: 1px solid black;
} 
/*para IE7*/
*+html div.content div.content2 {
    display:inline;
}
</style> 
</head>
 
<body>
 
<div class="content"> 
<div class="content2"> 
1
</div>
<div class="content2"> 
2
</div>
<div class="content2"> 
3
</div>
<div class="content2"> 
4
</div>
<div class="content2"> 
5
</div>
<div class="content2"> 
6
</div>
</div> 
 
</body>
</html>

IE Sucks...

karlic0s · #4 (**permalink**) 06/05/2011, 06:33

Cita:

Iniciado por elbuensaint

lo que quieres hacer es una web horizontal?
Si es asi, no le veo el caso de usar overflow en el div, solo necesitas definirle el ancho al div principal. Como tienes 6 span/divs de 300px, el ancho del div content será de 1800px, con esto el mismo navegador creará el scroll horizontal. De la forma que lo haces crea un doble scroll horizontal en netbooks, donde la resolución es menor.

La verdad no entendí muy bien cual es tu problema, tal vez si pusieras el código completo que estás usando podría ayudarte mejor, pero prueba lo que te digo arriba, tal vez esa sea la solución :P

Es ese el código, no hay más :P

Básicamente lo que quiero es un div que ocupe el 100% de una página y tenga scroll horizontal si lo requiere, es decir, si la configuracion de pantalla es de 1024 por ejemplo el div content ocupa 1024 pues bien, por poner un ejemplo los divs que estan dentro de content son de 500px de ancho y 100% de alto y hay 4, el problema es que estos divs se organizarian 2 arriba y 2 abajo y lo que quiero es que se organicen dentro del scroll de content de forma horizontal, es decir, que no salten de linea.

Gracias Seocusco, pero me he dado cuenta que el problema con mi código anterior y es por "lo que no me gusta" es que dependo de la propiedad "white-space: nowrap;" y esto es una pu*ada porque los espacios y saltos de linea me los coge y al escribir más codigo dentro de esos divs me hace saltos de linea inecesarios.

Creo que la solución va a ser js al final, porque... A nadie se le ocurre nada mas? :S

Gracias