Aporte: Guía de Migración a XHTML+CSS - Parte II

[Caminantejm]

Iniciado por jomaruro

Hola:

Vamos a ver, el orden en que los pongas es como se situan en la página, como tu dices, primero la izquierda, después el centro y al final la derecha. Bien, en el caso de tu código no tienes definido el ancho del centro. Entonces, al posicionarlo antes del div de la derecha ocupa todo el espacio disponible en el navegador. Sin embargo, si colocas antes el div de la derecha el centro ocupa el hueco libre del centro.
Saludos.

Gracias jomauro.

1.- Sigue sin funcionar aunque le ponga width tal como se ve. El div de la derecha no sube.

Código CSS:

div#pagina {
  border: 1px solid #CCC;
  background-color: salmon;
  padding: 10px;
}
 
.derecha {border: 1px solid crimson; 
width: 100px; 
height: 140px;
  float: right;
}
 
.izquierda {border: 1px solid saddlebrown; 
width: 100px; 
height: 140px;
  float: left;
}
 
.centro {background:aqua;
        width:600px;
        margin-left: 110px;} 
 
div.clear {
  clear: both;
}
 

Código HTML:

<div id="pagina"> 
 
    <div class="izquierda">Izquierda</div>
 
    <p class="centro">
  Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable.</p>
  
        <div class="derecha">Derecha</div>
  
  Texto anterior al clear.
  <div class="clear"></div>Texto posterior al clear.
</div>
 

2.- Luego confirmamos que no es radicalmente exacto que se "los float se salgan del flujo". Se salen pero al tiempo hay que colocarlos estratégicamente para que ello se cumpla. Ahora, ¿cuál es el orden? Es cuestión de acertar.
3.- En el ejemplo de Mikmoro no declara width a la columna del centro y se queda líquida, adaptada a lo que le queda entre las dos de los lados. Está en la parte primera de Migración...

Gracias. A ver si alguien tiene otras experiencias.
Saludos.
Caminantejm.