Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/01/2012, 12:33
Avatar de C2am
C2am
 
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: div al 100% entre dos divs

Hola
A ver que te parece esto:
Código HTML:
Ver original
  1.  
  2.     <div class="contenedor">
  3.         <div class="cajaproducto"><span class="texto">Producto uno<br/>continua producto</span></div>
  4.         <div class="cajaprecio"><span class="texto">$120000.50</span></div>
  5.         <div class="puntos"></div>
  6.  
  7.     </div>
  8.    
  9.     <div class="contenedor">
  10.         <div class="cajaproducto"><span class="texto">Producto dos: </span></div>
  11.         <div class="cajaprecio"><span class="texto">$120000.50</span></div>
  12.         <div class="puntos"></div>
  13.  
  14.     </div>
  15.    
  16.     <div class="contenedor">
  17.         <div class="cajaproducto"><span class="texto">Producto tres tres tres</span></div>
  18.         <div class="cajaprecio"><span class="texto">$12000588954560.50</span></div>
  19.         <div class="puntos"></div>
  20.  
  21.     </div>
  22.  
  23.  
  24.     </div>
  25. </body>
  26. </html>

Código CSS:
Ver original
  1. .contenedor{
  2.     width:100%;
  3.     height:50px;
  4.     overflow:hidden;
  5.     }
  6. .cajaproducto{
  7.     float:left;
  8.     height:100%;
  9.     display:table;
  10.      }
  11.  
  12. .cajaprecio{
  13.     height:100%;
  14.     float:right;
  15.     display:table;
  16. }
  17.  
  18. .puntos{
  19.     height:90%;
  20.     border-bottom:1px dashed #666;
  21.     overflow:hidden;
  22. }
  23.  
  24. .texto{
  25.     display:table-cell;
  26.     vertical-align:bottom;}

Aquí lo podés ver en funcionamiento.

Aclaración: solo funcionara con navegadores modernos, eso quiere decir IE9 en adelante, debido a la propiedad display: table.

Esto se puede mejorar mucho, por supuesto, si utilizamos eso de display:table más eficientemente, lo cual me hace pensar si en realidad no deberías usar una tabla real.

Pero en base a tu ejemplo, y pensando en la estructura: producto (float:left) - puntos (al 100% del resto) - precio(float:right) se soluciona cambiando el orden en el html, es decir primero los dos con float (producto y precio) y luego "puntos (sin float)" para que de esta forma pueda acomodarse entre ambos.

El table-cell es para poder aplicar vertical-align:bottom de manera que al tener dos lineas quede bien, porque sino quedan los puntos y el precio más arriba.

saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 16/01/2012 a las 12:40