Div que no se desplace al redimensionar la pantalla

sinma · #1 (**permalink**) 18/07/2007, 03:18

Hola a tod@s,

En una página tengo dentro de un div ("content") tengo dos divs situados uno al lado del otro ("div1","div2"). Se muestran correctamente.

Pero si se redimensiona la pantalla, haciéndola más pequeña, el segundo div se desplaza y se sitúa debajo del primer div. Y lo que querría es que siga manteniendo su posición, aunque pueda llegar a no verse si la pantalla se hiciera más pequeña que el tamaña del "div1", y sin utilizar posiciones absolutas, puesto que están contenidos en un div padre ("content").

Espero haberme explicado...

Aquí muestro él código:

pagina.html

Código:

<div id="content">
   <div class="div1">
        contenido div1
   </div>
   <div class="div2">
        contenido div2
   </div>
</div>

estilos.css

Código:

#content{
clear:both;
  padding: 0px 40px 10px 200px;
  background-color: #fff;
  color: #333;
}

div.div1{
  float:left;
}

div.div2 {
  float:left;
  margin-left: 3em;
  margin-top: 6em;
}

Muchas gracias

PatomaS · #2 (**permalink**) 18/07/2007, 04:01

Hola

Basta con que modifiques el overflow del "content", puedes ponerle barras de scroll o hacer que lo que no quepa se esconda, aunque mejor le pones barras.

Felicidad

sinma · #3 (**permalink**) 18/07/2007, 04:43

Gracias por la respuesta!

Pero he añadido overflow:hidden en el "content" y persiste el problema.

Código:

#content{
  overflow:hidden;
  clear:both;
  padding: 0px 40px 10px 200px;
  background-color: #fff;
  color: #333;
}

No sé cómo solucionarlo...

PatomaS · #4 (**permalink**) 18/07/2007, 19:33

Hola

Tomé tu código, lo puse en una página de pruebas que tengo, le hice un par de modificaciones, básicamente poner bordes a las capas y fondo al body para ver el funcionamiento y todo va bien.

Aquí te dejo el código que usé:

Código:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		html,body {
			width: 100%;
			height: 100%;
			background-color: #ccc;
		}
		#content{
			clear:both;
			padding: 40px 40px;
			background-color: #fff;
			color: #333;
			border: 1px solid #f00;
			width: 90%;
			height: 80%;
			min-width: 90%;
			overflow: auto;
		}

		div.div1{
			float:left;
			border: 1px solid #0f0;
		}

		div.div2 {
			float:left;
			margin-left: 3em;
			margin-top: 6em;
			border: 1px solid #00f;
		}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="content">
	<div class="div1">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		contenido div1
	</div>
	<div class="div2">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		contenido div2
	</div>
</div>
</body>
</html>

Seguramente no te sirve así directamente, pero puedes jugar con el y aprender más del funcionamiento de los componentes que usé.

Las definiciones de dimensiones al body y al html son para ayudar a la visualización, aunque no te vienen mal si las quieres usar, los colores seguramente no te vayan bien. Reduje tus padding porque me daba fastidio usar una ventana tan grande, pero funciona igual con lo que le pongas, por cierto que no se porque tienes un padding de 400px en una capa, suena misterioso.

Bueno, ya nos contarás si te va bien.

Felicidad

sinma · #5 (**permalink**) 19/07/2007, 00:48

Gracias por responder de nuevo.

He probado el código que has puesto. Pero si redimensionas la pantalla, y la vas estrechando, llega un momento que el div2 pierde su posición inicial y se desplaza hacia abajo. A parte, el contenido de los dos divs también cambia su visualización al redimensionar la pantalla, ya que el texto pasa de estar en una línea a estar en dos.

Sé que éste no es un tema crítico, pero me gustaría que mi página mantuviera su formato (dentro de lo posible).

Yo estoy acostumbrada a trabajar con tablas para estructurar el contenido, pero parece ser que no es recomendable hacerlo así, por lo que lo estoy intentando con divs. Pero cuando estructuras tu contenidos con tablas, si redimensionas la pantalla tu página no pierde su formato. Y eso es lo que estoy intentando con los divs... Pero de momento nada...

sinma · #6 (**permalink**) 19/07/2007, 01:02

P.D: Estoy trabajando con el framework CakePHP, que por defecto tiene definido en el content el padding con 200px ( padding: 0px 40px 10px 200px; ). Por qué comentas que suena misterioso?

PatomaS · #7 (**permalink**) 19/07/2007, 01:32

Hola

Porque uno define los espacios que necesita para cada cosa según dichas necesidades.

No he usado tal framework, pero si por defecto define algo y no es en cero, me parece una estupidez. Especialmente valores tan arbitrarios como esos.

Sobre el ejemplo que te puse, yo he redimensionado mis ventanas hasta 20 pixels de ancho y la capa 2 nunca se mueve.

Felicidad

sinma · #8 (**permalink**) 19/07/2007, 02:37

¿Puede que estemos utilizando diferentes navegadores y que se deba a ello que al redimensionar la ventana con el ejemplo que pusiste a ti no se te desplacen las capas y a mi sí?

Yo estoy utilizando IE 7.0

Bueno, muchas gracias por tu colaboración.

sinma · #9 (**permalink**) 19/07/2007, 03:18

PatomaS, haciendo pruebas con tu código, al final he conseguido que los divs mantengan su posición al redimensionar la pantalla!

Entre las pruebas que hice, fue añadir otro div para colocar un menú (que es como lo haré en mi página).

Aunque el problema está resuelto, no sé exactamente cuál de los cambios que he aplicado hace que ahora funcione como yo quería. Lo que si que observo, es que si quito el div del menú, vuelve a aparecer el problema... Qué jaleo...

Bueno, pongo el código que me ha funcionado, marcando en rojo el código modificado o añadido:

Código:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		html,body {
			width: 100%;
			height: 100%;
			background-color: #ccc;
		}
		#content{
			float:left;	
			padding: 40px 40px;		
			background-color: #fff;
			color: #333;
			border: 1px solid #f00;
			width: 80%;
			height: 80%;
			min-width: 80%;
			overflow:hidden;
			position:absolute;		
		}				
		#menu{
			float:left;
			padding: 40px 5px;
			background-color: #fff;
			color: #333;			
			margin-right:1em;
			height: 80%;	
			width: 100px;				
			background:#E8EEF0;
		}

		div.div1{
			float:left;
			border: 1px solid #0f0;
		}

		div.div2 {
			float:left;
			margin-left: 3em;
			margin-top: 6em;
			border: 1px solid #00f;
		}
	</style>
	<title>Pruebilla</title>
</head>
<body>
	<div id="menu">
		<h2>MENU</h2>
		<li>opcion 1</li>
		<li>opcion 2</li>
		<li>opcion 3</li>
	</div>
	<div id="content">
		<div class="div1">
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			contenido div1
		</div>
		<div class="div2">
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			contenido div2
		</div>
	</div>		
</body>
</html>

Muchas gracias!

PatomaS · #10 (**permalink**) 20/07/2007, 10:21

Hola

Bueno, no dispongo de explorer 7, por lo que no puedo hacer pruebas con el ni opinat tampoco. La página que te pasé la probé en firefox 2.0.0.4 en Linux y en WIndows, Opera 9.20 Linux y Windows Explorer 6 en Windows y en Linux (versión de ies4linux).

Felicidad