Foros del Web » Creando para Internet » CSS »

Contenido abajo de divs flotantes

Estas en el tema de Contenido abajo de divs flotantes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/04/2005, 03:24
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Contenido abajo de divs flotantes

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.
__________________
oohh... quisiera ser godines!!!
  #2 (permalink)  
Antiguo 07/04/2005, 04:45
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Código:
clear: left;
en el DIV que no queres que se ponga al lado de los DIVs flotantes.
  #3 (permalink)  
Antiguo 07/04/2005, 14:03
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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?
__________________
oohh... quisiera ser godines!!!
  #4 (permalink)  
Antiguo 07/04/2005, 15:40
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #5 (permalink)  
Antiguo 07/04/2005, 16:32
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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
__________________
oohh... quisiera ser godines!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:29.