3 columnas

bulldog · #1 (**permalink**) 05/03/2006, 15:03

Hola, definitivamente creo que soy un patoso!! Estoy tratando de crear una estructura de web con 3 columnas, he leido en varios sitios cómo hacerlo y no consigo que me quede bien ya que la columna de la derecha la tira hacia abajo la columna centro. Miren, esto es lo que tengo:

Código:

#contenedor{
width:760px;
margin: 0 auto;
background-color:#CCCCCC;
}

#izquierda{
width:150px;
float:left;
}

#derecha{
width:150px;
float:right;
}

#centro{
width:370px;
margin-left:160px;
}

Código:

<div id="contenedor">
  	<div id="contenido">
  		<div id="izquierda">
		       izquierda
		</div>
		<div id="centro">
		      centro
		</div>
		<div id="derecha">
		      derecha
		</div>
  	</div>
</div>

Cual es el problema???

Saludos y muchas gracias!!

xevisoyyo · #2 (**permalink**) 05/03/2006, 15:27

codigo css

Código:

body{
text-align:center;}

#contenedor{
margin:auto;
width:760px;
background-color:#CCCCCC;
overflow:auto;}

#izquierda{float:left; margin:0; width:150px;}
#centro{float:left; margin:0; padding:0; width:460px;}
#derecha{float:left; margin:0; width:150px;}

codigo html

Código HTML:

<html><body>
<div id="contenedor">
  		<div id="izquierda">
		       izquierda
		</div>
		<div id="centro">
		      centro
		</div>
		<div id="derecha">
		      derecha
  	</div>
</div></body></html>

1 - He quitado la capa contenido pero puedes cambiar contenedor por contenido y hacer que el contenedor ocupe el 100% de ancho de pagina mientras que el contenido sea de 760px

2 - Decirte que para que no tengas problemas mires que la suma de los anchos de todas las columnas sean igual al ancho que las contiene (imagino que las columnas no las tocaras ni variaras para nada, pero puedes variar la anchura a tu gusto, eso si, si lo haces has de tener en cuenta que no has de añadir ni padding ni margin ni border, en caso de hacerlo tenlo en cuenta para que te salgan las cuentas a la hora de sumar el ancho total de las 3 columnas)

3 - veras que puse overflow:auto; bien aunq en explorer no notes diferencia alguna, en opera o cualquier otro sila notaras, por ejemplo el color d efondo no lo veras sin overflow ya que medira 0px de altura, mientras que con overflox engloba todas las capas que pusiste (izquierda centro derecha), tambien te evita que si al final creas otra capa, las anteriores te queden por encima

4 - pusiste margin:0 auto; solo has d eponer una de las dos, en este caso margin:auto;

5 - el margin-left no lo necesitas, imagino que lo pusiste para que se viera centrada la pagina, pero has de pensar que no todos tienen tu resolucion con lo cual no se vera igual en todos los ordenadores, pero si pones el codigo que te di se vera centrado en todos

6 - si copias lo que te puse tal cual te quedara lo que tu quieres (imagino) igualmente guarda lo que ya tengas o pruebalo en otro lado

man0l0 · #3 (**permalink**) 05/03/2006, 15:40

Cita:

Iniciado por xevisoyyo

4 - pusiste margin:0 auto; solo has d eponer una de las dos, en este caso margin:auto;

Estás seguro de eso?, (claro que está mal si se quiere centrar), pero eso es lo mismo que poner:

margin-top: 0;
margin-right: auto;

por tanto me imagino que el código sería válido ¿o me equivoco?.

Saludos!

xevisoyyo · #4 (**permalink**) 05/03/2006, 15:41

imaginé que solo queria centrarlo, en el caso de que quiera la web sin margenes basta con añadir al codigo css que le di un margin:0; en el body, ahi ya entra lo que a el le interese hacer (personalmente no me gusta como queda sin hacer esto)

que pruebe el codigo q le irá bien q es lo que interesa ;)

mira cualquiera de las dos webs q tengo en la firma y veras que bien centradito esta todo

y no uso ni una tabla

pasa de las paginas index que no son las originales, mira dentro de la webs

bulldog · #5 (**permalink**) 05/03/2006, 16:14

Muchas gracias xevisoyyo, ahora ya va todo perfecto, pero una preguntilla, no es más normal ponerle a #derecha{float:right;} en lugar de float:left;??

Muchas gracias por todo y seguiré practicando y por supuesto molestandoos

xevisoyyo · #6 (**permalink**) 05/03/2006, 16:21

la verdad es que en este caso poco importa si esta a la derecha o a la izquierda ya que estan encajados, te aconsejo que si usas css para hacer "tablas" siempre encajes todo (explorer interpreta de diferente manera y si haces todo a medida no hay interpretacion que valga), de esta manera no habran desplazamientos, para ello ten en cuenta siempre lo que te dije

ancho de una columna = whith + padding + border + margin, pero no creo que pongas nada de eso en esas columnas ya que seguro tendras los contenidos dentro de ellas sin estas verse afectadas, siemrpe y cuando no pongas nada dentro que supere su ancho

en cuanto a lo del right si alguien cree q ha de poner right que lo diga, pero te aseguro que asi te ira bien