Ver Mensaje Individual
  #13 (permalink)  
Antiguo 06/02/2007, 16:22
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: diseño con cabecera, tres columnas y pie.

Cita:
Iniciado por chuidiang Ver Mensaje
Hola:

Tienes razón y creo ver por donde van los tiros, aunque no creas que lo tengo muy claro.

La columna izquierda (roja) tiene dos líneas de texto y es más alta que el contenido. Si a la columna derecha le quito el margin-left:-100px y tampoco pongo el borde del contendor, la columna derecha sale debajo del contenido y pegada al lado derecho de la columna izquierda (jo que lio).
Antes he estado a punto de decírtelo pero al final no lo he hecho: no sé si te habías dado cuenta, pero en realidad el contenedor principal que antes citabas, no se agranda como para acoger a los dos laterales y el central; mide de alto la mitad de las columnas laterales. Pon esto y lo verás enseguida:

<div style="border: 1px solid yellow; float: left; width: 100%;">

Si no le das margen negativo a la caja de la derecha, al estar flotada a la izquierda, inevitablemente saltará a la siguiente línea porque no cabe. ¿Y a dónde va? Al siguiente espacio disponible en vertical, es decir, a donde acaba el contenedor central. Así que este comportamiento es bastante lógico.

Cita:
Si ahora le doy margen -99px, sale a la misma altura, con un pixel faltante para llegar al borde izquierdo del navegador y tapando parte de la columna roja. Eso parece lógico.
Lo mismo de antes. Al estar la roja (izquierda) flotada y poner a la de la derecha ese margen negativo, el siguiente espacio disponible en el flujo del documento es el que está ocupando, es decir, el de antes pero con un margen negativo de 99px.

Cita:
Si ahora le doy margen -100px, se va a su sitio, al lado derecho del navegador y a una altura mayor (justo debajo de la cabecera). ¿No debería quedarse a la misma altura y desplazarse unicamente ese pixel que le falta, tapando parte de la columna roja? ¿Por qué ese salto tan brusco?.
Por lo que he dicho: al poner -100px de margen izquierdo (su tamaño), ya tiene sitio en la primera línea, y por eso se va a su sitio, el lado derecho. Todo lo que sea menos de su tamaño como margen negativo le obliga a saltar porque no cabe en la primera línea horizontal.
Hasta ahora todo es correcto, según lo que se espera que hagan.

A mi esto también me resulta muy divertido. Igual nos tienen que abrir un hilo para nuestras "dudas existenciales con CSS"

Mikel.