Ver Mensaje Individual
  #2 (permalink)  
Antiguo 20/08/2014, 11:17
juangemelo01
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años, 11 meses
Puntos: 17
Respuesta: Problema con layout 2 columnas

Amigo, el detalle es que no estan en la misma sintonia #izquierda y #Derecha

Código:
#left {
  		float: left;
  		width: 200px;
		border: 3px double green;
		height:500px;
	}
	#right {
  		float: left;
  		width: 75%;
  		border: 3px double red;
	}
ejemplo

tenemos el ancho de nuestra pagina que es igual a 800px
Derecha mide el 75% del tamaño del ancho de nuestra pagina (es igual a 600px)
izuqierda siempre mide 200px

sumando ambos nos da como resultado 800px pero
¿que sucede cuando nuestra pagina sea menor a 800px?
ahora como ejemplo, nuestra pagina mide 600px

Derecha mide 450px
izquierda mide 200px
reultado 650px ouch
los elementos miden mas que nuestra venta, como son flotantes, el que flota a la izquierda se queda arriba y el que flota a la derecha se queda abajo

solucion:
trabaja con % a mano izquierda en dimenciones inferiores para que te del el 100%, si es necesario, reduce un poco el tamaño o haslo mas grande dependiendo de lo escalable que quieres que sea tu web

ojo, los bordes, y margenes tambien los tienes que considerar ya que si en puro ancho llegan a sumar el 100%, esos pixeles extras van a generar que se te caigan las cajas

considera que en vez de trabajar con el 100%, estas trabajando un 95%, es muy raro que por bordes y margenes se te rompa el diseño hasta que llegas al siguiente nivel adaptable