Contenido abajo de divs flotantes

[safe]

estoy realizando un catalogo de accesorios y en la informacion de los productos utilizo varios divs pequeños para mostrar los colores en los que esta disponible cada producto.
El problema es que esos divs estan flotantes, abajo de eso tengo otra informacion y en firefox esa informacion, sin entra, se coloca a la misma altura de los cuadritos y no abajo como quiero (En el IE se ve bien).

En esta direccion se puede ver un ejemplo:
http://www.luacheaaccesorios.com/cat...hp?id=62&cat=2

¿como deberia hacer para que el contenido aparesca abajo?

Desde ya muchas gracias.

[Remo:Erdosain]

Código:

clear: left;

en el DIV que no queres que se ponga al lado de los DIVs flotantes.

[safe]

Gracias por responder Remo.. pero no hace lo que quiero, si ves en el ejemplo tengo un DIV que forma la columna izquierda, y otro que forma la derecha. En esta ultima tengo dos div uno arriba del otro. Si a la de abajo le pongo "clear: left" se baja, pero no despues de la capa de arriba sino de la que forma la columna izquierda... no se si me explico.

Por otro lado yo ahora tengo separado el contenido de la columna derecha en dos DIVs, pero si pensandolo mejor no creo que esto sea del todo necesario:

ahora tengo:

Código:

<div id="derecha">

  <div id="descripcion">
    <h2>Descripci&oacute;n</h2>
    <p>Collar  "Trenza" con cuentas de papel</p>
    <h2>Disponible en los siguientes colores</h2>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(0, 0, 0);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(0, 153, 0);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(0, 255, 255);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(255, 204, 255);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(255, 255, 255);"></div>
  </div>

  <div id="consulta">
    <h2>Consultar por este Producto</h2>
    <form action="d" method="post">
      <fieldset>
        <p>Nombre</p>
        <input type="text" />
        <p>E-mail</p>
        <input type="text" />
        <p>Consulta</p>
        <textarea name="consulta" cols="1" rows="4"></textarea>
        <input type="submit" value="enviar" style="width:auto; margin-top:10px "/>
      </fieldset>
    </form>
  </div>

  <div class="spacer"></div>

</div>

Pero perfectamente podria tenerlo asi:

Código:

<div id="derecha">

    <h2>Descripci&oacute;n</h2>
    <p>Collar  "Trenza" con cuentas de papel</p>
    <h2>Disponible en los siguientes colores</h2>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(0, 0, 0);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(0, 153, 0);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(0, 255, 255);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(255, 204, 255);"></div>
    <div class="colores_sombra"></div>
    <div class="colores" style="background-color: RGB(255, 255, 255);"></div>

    <h2>Consultar por este Producto</h2>
    <form action="d" method="post">
      <fieldset>
        <p>Nombre</p>
        <input type="text" />
        <p>E-mail</p>
        <input type="text" />
        <p>Consulta</p>
        <textarea name="consulta" cols="1" rows="4"></textarea>
        <input type="submit" value="enviar" style="width:auto; margin-top:10px "/>
      </fieldset>
    </form>

  <div class="spacer"></div>

</div>

El tema es que probando de las dos formas tengo el mismo problema. Que me recomiendas?

[kemie]

si flotas tus dos colunas, los clears solo afectaran lo que esta dentro de esa columna... si entendi bien eso debería de solucionar tu problema.

[safe]

gracias Kemie... ese era el problema, no tenia las dos columnas flotando, ahora si me funciono el Clear para solucionar el problema planteado... Pero, a su vez, me creo otro problema similar.

Si vez en el primer codigo que puse en el post anterior veras que al ultimo hay un div con la clase spacer, esa clase era simplemente un "clear: both" para que la columna derecha siempre tenga el mismo alto que la columna izquierda, pero ahora no me funciona.
La verdad que no se como solucionarlo porque soy muy nuevo en esto de CSS y no logro entender del todo como funciona el clear, entonces se me complica para deducir cual seria la solucion posible.

Desde ya muchas gracias