bloques (div's) paralelos

arwen_1 · #1 (**permalink**) 18/08/2007, 19:16

hola! soy una novata en esto de los css

quiero hacer lo siguiente!: estructurar mi pagina, de modo que utilizando las etiquetas div y los css, pueda dividir mi pagina en una barra superior, una derecha una izquierda y la central. como si usara marcos

entonces creo css para cada una de las partes en que quiero estructurar mi pagina, pero cabe destacar que las partes estaran en las mismas filas pero diferentes columnas, es decir, paralelas... entonces abajo les muestro lo que hice, y de lo que muestra la barra superior y la izquierda... pero la central la muestra en la columna adecuada pero justo debajo de la izquierda y lo mismo pasa con la derecha, aparece debajo de la central. no se si sean por justamente los div, ya q en el doc principal haga el uso de los css como muestro en codigo señalizado mas abajo

Código PHP:

  <style>

#superior {
    
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    width:100&#37;;
    height:80px;
    border:1px solid #FFFFFF;

}

#izquierda {
    margin:5px 0px 0px 5px;
    width:17%;
    height:100%;
    border:1px solid #003399;
}

#centro {
    margin:relative;
    margin:5px 0px 0px 18%;
    width:66%;
    height:100%;
    border:1px solid #FFFFFF;
}

#derecha {
    position:relative;
    margin:5px 0px 0px 85%;
    width:15%;
    height:100%;
    border:1px solid #003399;
}
</style>

ahora eso está en el doc .css, en el .php hago las llamadas de los css asi:

Código PHP:

          <div id="superior"></div>
    <div id="izquierda"></div>
    <div id="centro"></div>
    <div id="derecha"></div>

por lo que tbn me imagino que al ser div, que bajan una linea, por eso no estan alineados en las mismas filas..

espero que se entienda mi problema!

PauCasas · #2 (**permalink**) 20/08/2007, 07:16

Tienes que jugar con la propiedad float de CSS. Si quieres que un div quede a la izquerda en el estilo poner "float:left;" o si quieres que quede a la derecha "float:right;" Pero para que funcione tendrás que jugar con divs anidados, por ejemplo:

Código HTML:

<html>
<head>
<style>
body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
#superior {
    width:100%;
    height:20%;
	background-color:#FFF;
}
#contenedor-inferior{
	padding:0;
	margin:0;
	width:100%;
	height:80%;
}
#izquierda {
	width:100%;
	height:100%;
	background-color:#EEE;
}
#contenedor-derecho{
	float:right;
	width:80%;
	height:100%;
}
#centro {
    width:100%;
	height:100%;
	background-color:#DDD;	
}
#derecha {
	float:right;
    width:25%;
	height:100%;
	background-color:#CCC;		
}
</style>  
</head>
<body>
    <div id="superior"></div>
	<div id="contenedor-inferior">
		<div id="contenedor-derecho">
		    <div id="derecha"></div>  
			<div id="centro"></div>
		</div>
		<div id="izquierda"></div>
	</div>
</body>
</html>

---------------------------------------------------------------------------------
Curriculums online en http://www.jobgraphy.com

arwen_1 · #3 (**permalink**) 21/08/2007, 08:59

pues use lo del float y si funciono... pero los div's no los tengo anidados...

sera por eso que en ie no se ven bien...?

el fierfox queda uno al lado de otro tal y como quiero, pero en ie, entre el div izquierdo y central me queda un espacio del ancho del div izquierdo...

si anido los div q tengo... como el parametro position es relative, no se descuadraria..? igual probaré

arwen_1 · #4 (**permalink**) 21/08/2007, 09:14

Hola otra vez, probé el codigo que me enviaste lo aplique al mio y funciona bien en ie! pero en firefox... :s un desastre....
a pesar de que al probar tu codigo sin meterle el mio... si lo muestra bien en firefox..

que podría ser..?