Garikoitz Araolaza wrote:

Hola:

Mareados ya con las (para nosotros aparentemente) caprichosas implementaciones de CSS, enviamos este caso para ver si alguien nos puede dar alguna luz:

�C�mo se puede conseguir que los bloques "crezcan" en funci�n de su contenido? o mejor dicho �Qu� narices hacemos para que no nos crezcan como debieran? (ver en http://www.codesyntax.com/cajas.html ) Por supuesto, querr�amos que el bloque verde (el menu) hiciera que el bloque principal aumentara seg�n hiciera falta, y no se superpusiera.

Lo que hemos puesto ah� es un ejemplo simplificado de lo que nos pasa. Pero esto, que es aparentemente tan sencillo, funciona a veces por algo que no controlamos, y otras veces no... �Magia?

Los elementos flotantes son retirados del flujo del documento y por tanto no influyen en el tama�o del elemento contenedor a no ser que el elemento contenedor tambi�n sea flotante.


CSS:

        div {
          /* para ver por donde van los tiros */
          border: 1px solid blue;       
        }       

        #main {
          width: 760px;
          float: left;
        }

        #menu {
          float: left;
          width: 200px;
        }

        #content {
          margin-left: 220px;
        }

En este caso, el `div#main`se alargar�a seg�n creciera el tama�o de `div#menu`.

Ahora bien, no siempre es posible hacer flotar el elemento contenedor. En tal caso, la mejor soluci�n es colocar un elemento con `clear: both;` tras el/los elemento/s flotante/s:

HTML (extracto):
        <div id="main">
                <div id="menu">
                  <ul>
                    <li>...</li>
                    ...
                  </ul>
                </div>
                <div id="content">
                  <p>Bla bla bla</p>
                </div>
                <div class="clear">
                </div>
        </div>

CSS:

        #main {
          /* lo que necesites, para conseguir
             el efecto que buscamos no es necesaria
             ninguna regla especial en el contenedor */
        }

        #menu {
          width: 200px;
          float: left;
        }

        #content {
          margin-left: 220px;
        }

        div.clear {
          height: 1px;
          /* personalmente, suelo dejar los elementos
             con esta finalidad en blanco (ni un pu�etero
             espacio), de ah� lo del height para asegurarme
             de que el div se muestra */
          /* a continuaci�n, la clave */
          clear: both;  
        }

Puedes leer un art�culo de Eric Meyer sobre el tema en <http://www.complexspiral.com/publications/containing-floats/>.
Muy completo y clarito... suponiendo que sepas ingl�s ;)


Un saludo,
Choan
--
http://du.lacalabaza.net/

_______________________________________________
Ovillo mailing list
[EMAIL PROTECTED]
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org

Responder a