Tema: 3 columnas
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/03/2006, 15:27
Avatar de xevisoyyo
xevisoyyo
 
Fecha de Ingreso: mayo-2005
Mensajes: 166
Antigüedad: 18 años, 11 meses
Puntos: 1
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

Última edición por xevisoyyo; 06/03/2006 a las 05:50