Problemas con DIV en Firefox

jotaincubus · #1 (**permalink**) 16/09/2010, 13:59

Buen dia para todos... y de antemano muchas gracias al que me pueda colaborar.

mi problema radica en lo siguiente:

Tengo el siguiente codigo HTML con el cual quiero colocar 3 DIV (IZQUIERDA - CENTRO - DERECHA) uno al lado del otro dentro de un DIV contenedor

Código HTML:

<div id="contenedor">
	
	<div id="superior">
		<span>hola</SPAN>
	</div>
	
	<div id="arriba">
		<span>hola</span>
	</div>

	<div id="izquierda">
		<span>hola</span>
	</div>

	<div id="centro">
		<span>hola</span>
	</div>

	<div id="derecha">
		<span>hola</span>
	</div>

	<div id="abajo">
		<span>hola</span>
	</div>

Y el siguiente codigo CSS

Código:

#contenedor {
border:1px solid black;
margin:0;
padding:0;
width:1050px;
}

	#superior {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#arriba {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#izquierda {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:20%;
	}

	#centro {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:57%;
	}

	#derecha {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:20%;
	}

	#abajo {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

En INTERNET EXPLORER va de lujo... pero en FIREFOX el DIV DERECHO me aparece en la parte de abajo, no se acomoda al lado derecho del DIV CONTENEDOR, ni colocandole FLOAT:RIGHT La verdad no entiendo porque si el porcentaje total de los 3 es de 97% si esto es asi, tendria espacio suficiente para los MARGIN de los tres y se me colocarian los 3 horizontalmente. Pero en FIREFOX no funciona.

Muchas gracias por su ayuda.

Juan Esteban

DigInDreams · #2 (**permalink**) 16/09/2010, 14:06

Pues en los códigos no vi ningun error pero el problema podría estar en que firefox tenga una interfaz como navegador más grande, más que un problema de tu web es que no es el mismo tamaño la interfaz de IE que la de Firefox.

Una sugerencia: Prueba con el Zoom de Firefox para ver si al alejarlo más (talvez a un 130%) el div se acomoda correctamente, si no es así ya tendrás la certeza de que es un problema de Web.

Continuare pasando por el tema para ver si tu problema se soluciono o no.

¡Suerte!

AlejandroM!
DigInDreams LSC - Aprende haciéndolo™ [[email protected]]

jotaincubus · #3 (**permalink**) 16/09/2010, 14:17

Muchas gracias por responder e interesarte en mi tema... te cuento que aumente el zoom del FIREFOX pero sigue el mismo problema... Te cuento que cuando bajo los porcentajes del width a IZQUIERDA 19% CENTRO 54% DERECHA 19% me los organiza bien, pero en INTERNET EXPLORER se ven horrible porque esos pierden simetria con los de arriba y abajo (quedan mas pequeños)

Ayudenme por favor llevo dos dias en esto y nada que me funciona...

matius · #4 (**permalink**) 16/09/2010, 17:26

Ni entiendo, porque si trabajas con un contenedor definido en pixeles, usas porcentajes en tus otros div. Porque además. no has definido todos los parámetros de referencia de los porcentajes y eso dará errores.

La forma en que lo resolví con tu configuración:
El margin del centro no debe tener margin a la derecha e izquierda (o sea 0px), el div derecha debe flotar a la derecha y no debe contener margin a la izquierda (o sea 0px).

Con el valor margin derecho del div izquierdo es como estableces la separación de div central con el div izquierdo y derecho.

Y pues a mi me funciono en todos los navegadores

Código HTML:

<html>
<head>

<style type="text/css">

body
{
margin:0;
padding:0;
}

#contenedor { border:solid 1px #000033;
margin:0 auto; /* remueve auto si no deseas centrarlo*/
padding:0; width:1050px;

}

#superior {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#arriba {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}


	#izquierda {
	float:left;
	position:relative; /* mover en relación al flujo de div*/
	border:1px solid black;
	margin:10px 8px 5px 5px; /* el segundo valor es el que define la separación del centro*/
	padding:5px;
	width:20%;
	}

	#centro {
	float: left;
        position: relative;
	border:1px solid black;
	padding:5px;
	margin:10px 0 5px; /* el centro debe tener un valor de 0 en margin-right y margin-left*/
	width:54%;
	}

	#derecha {
	float:right;
	position:relative;
	border:1px solid black;
	padding:5px;
	margin:10px 5px 5px 0; /* la derecha debe tener un valor de 0 en margin-left*/
	width:20%;
	}

	#abajo {
	border:1px solid black;
	margin:5px 5px;
	width:99%;
	clear:both;
	}

</style>

</head>

<body>

<div id="contenedor">
	
	<div id="superior">
		<span>hola</SPAN>
	</div>
	
	<div id="arriba">
		<span>hola</span>
	</div>

	<div id="izquierda">
		<span>hola</span>
	</div>

	<div id="centro">
		<span>hola</span>
	</div>

	<div id="derecha">
		<span>hola</span>
	</div>
    
	<div id="abajo">
		<span>hola</span>
	</div>

	
<div style="clear:both"></div>
</div>

</body>
</html>

jotaincubus · #5 (**permalink**) 17/09/2010, 08:57

Hermano muchisimas gracias... por personas como usted es que uno sale adelante en los problemas... se le agradecera eternamente...

jomaruro · #6 (**permalink**) 18/09/2010, 01:35

Hola:

El problema es fácil de entender, estriba en la diferencia a la hora de calcular el ancho de una caja:

Firefox: width+padding+border+margin.
Explorer: width+padding+border.

La primera (Firefox) cumple con la estandarización w3c, la segunda no.

Saludos.

jotaincubus · #7 (**permalink**) 20/09/2010, 21:27

Wow eso si que es una respuesta concreta... muchas gracias por el dato tecnico, es bueno saber desde lo basico porque se genera el problema...

Muchas gracias