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
