div al 100% entre dos divs

alex_taboada · #1 (**permalink**) 16/01/2012, 04:03

Hola a todo el mundo.

Lo primero de todo es dar las gracias de antemano a todos aquellos que me ayuden.

El problema es el siguiente. Necesito maquetar una hoja de precios de la siguiente forma: un texto con el producto, que puede ocupar una linea o varias; una linea de puntos al final del producto que vaya hasta el precio, y al final el precio.

Algo asi:

Producto destacado para una
seccion en concreto..........25€

Y tengo que hacerlo con CSS. Consegui hacerlo en una sola línea usando posiciones absolutas. Colocaba un div con border-bottom en la capa contenedora, y por encima colocaba otros dos divs, uno a cada lado, con color de fondo de forma que pisaran la línea. Para productos de una sola línea queda perfecto. Incluso para los de dos líneas, solo hay que cambiar la ubicación de la capa de la línea de puntos.

Pero esta solución no me vale porque nunca se si el producto va a tener una linea o dos.

Después intente con 3 capas. de esta forma

Código:

<div id="contenedor" style="position:relative; display:block; width:200px">
<div id="texto" style="float:left; position:relative;">texto</div>
<div id="puntos "style="float:left; position:relative; border-bottom:1px dotted #666; width=100%"></div>
<div style="float:right; position:relative;">precio</div>
</div>

Pero la línea de va al 100% del contenedor. No hay forma de que esa capa del medio sea al 100%, pero del espacio que le dejan las otras.

Muchas gracias de nuevo por la ayuda a todos.

C2am · #2 (**permalink**) 16/01/2012, 12:33

Hola
A ver que te parece esto:

Código HTML:

Ver original<html>
<body>
 
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto uno<br/>continua producto</span></div>
        <div class="cajaprecio"><span class="texto">$120000.50</span></div>
        <div class="puntos"></div>
 
    </div>
    
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto dos: </span></div>
        <div class="cajaprecio"><span class="texto">$120000.50</span></div>
        <div class="puntos"></div>
 
    </div>
    
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto tres tres tres</span></div>
        <div class="cajaprecio"><span class="texto">$12000588954560.50</span></div>
        <div class="puntos"></div>
 
    </div>
 
 
    </div>
</body>
</html>

Código CSS:

Ver original.contenedor{
    width:100%;
    height:50px;
    overflow:hidden;
    }
.cajaproducto{
    float:left;
    height:100%;
    display:table;
     }
 
.cajaprecio{
    height:100%;
    float:right;
    display:table;
}
 
.puntos{
    height:90%;
    border-bottom:1px dashed #666;
    overflow:hidden;
}
 
.texto{
    display:table-cell;
    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

alex_taboada · #3 (**permalink**) 16/01/2012, 13:15

Me funciona solo en explorer. En el resto de navegadores no me va.

Pero es lo más cerca que he estado de la solución. Muchisimas gracias.

C2am · #4 (**permalink**) 16/01/2012, 14:00

No sé que modificación le has hecho, el ejemplo que te mostré funciona en Chrome, Opera, firefox, safari y en IE9, y según la herramienta de desarrollo de IE tambien funciona en IE8.

Me alegro que te sirva como base.
Saludos

emprear · #5 (**permalink**) 16/01/2012, 20:41

Cita:

Iniciado por C2am

lo cual me hace pensar si en realidad no deberías usar una tabla real.

Por supuesto que debería

Si los datos son esos, una descripción y su precio (incluso una imagen), es más que correcto.
Parece que la frase "no hay que maquetar con tablas", está teniendo más significado del que realmente representa.

Saludos

C2am · #6 (**permalink**) 16/01/2012, 22:49

Exacto emprear, pobres tablas, tan despreciadas. jajaja.

De todas formas, el hacerlo así, con css, más allá de que supone poner un div vacio con el solo objeto de mostrar un borde, me ha resultado muy interesante.

Saludos

alex_taboada · #7 (**permalink**) 17/01/2012, 02:57

Efectivamente se ve bien, disculpa.

Pero no es lo que necesito por el siguiente motivo.

En el ejemplo que me pones, el texto tiene un <br> que fuerza el salto de línea. En mi caso, yo recibo una linea de texto directamente desde el servidor, de forma que nunca se si está en un línea o en dos. Es decir, no tengo ningún <br> que me de el salto de línea.

La ídea es que todas las capas se coloquen una detras de la otra, para que en el caso de que el texto tenga una sola línea se muestre bien, y si tiene dos, se muestre igual pero en al segunda línea.

Espero haber podido explicarme mejor.

Es por eso que una tabla no me vale. En la tabla, yo podría poner en cada columna una cosa:texto, puntos y precio. Pero el texto tiene que ir en una línea o en dos, según el propio texto entre o no en la caja, y a continuación la línea de puntos y el precio.

Muchas gracias por las respuestas.

alex_taboada · #8 (**permalink**) 17/01/2012, 04:37

El ejemplo que quiero es algo asi, pero la linea de puntos autoajustable sin tener que especificar el width.

Código HTML:

<html>
<head>
<style>
#contenedor				{ float:left; width:300px; display:inline}
.oferta 					{ float:left; width:100%; padding:2px; position:relative; margin:5px; }
.oferta p					{ padding:0; margin:0; display:inline}
.oferta .texto 				{ float:left; display:inline;}
.oferta .precio 			{ float:right; display:inline;}
.oferta .linea-puntos		{ float:right; border-bottom: 1px dotted #666; display:inline; width:168px; height:15px}
</style>
</head>
<body>
<div id="contenedor">
	<div class="oferta">
		<p>Esto es una oferta tipo de prueba para ver como queda en 2 lineas</p>
		<p class="precio">23€</p>
		<p class="linea-puntos"></p>
	</div>
</div>
</body>
</html>

C2am · #9 (**permalink**) 17/01/2012, 13:38

Cita:

Iniciado por alex_taboada

En el ejemplo que me pones, el texto tiene un <br> que fuerza el salto de línea. En mi caso, yo recibo una linea de texto directamente desde el servidor, de forma que nunca se si está en un línea o en dos. Es decir, no tengo ningún <br> que me de el salto de línea.
La ídea es que todas las capas se coloquen una detras de la otra, para que en el caso de que el texto tenga una sola línea se muestre bien, y si tiene dos, se muestre igual pero en la segunda línea.

El br está para demostrar que aún con dos lineas el ejemplo funciona, con lo cual la verdad no importa que tiene o no tiene el texto "producto", ya que siempre se alineara en la parte inferior del div y dará la sensación que respeta la última linea, así sea una linea, dos o más.

Cita:

Iniciado por alex_taboada

Espero haber podido explicarme mejor.

Te has explicado de maravilla, solo que ahora no logras, o no sabes como adaptar el ejemplo a tus necesidades.

Cita:

Iniciado por alex_taboada

Es por eso que una tabla no me vale. En la tabla, yo podría poner en cada columna una cosa:texto, puntos y precio. Pero el texto tiene que ir en una línea o en dos, según el propio texto entre o no en la caja, y a continuación la línea de puntos y el precio.

Mmm, me parece que estas haciendo un lio bárbaro con eso de la segunda linea.
Si tienes un texto (no importa con cuantas lineas) dentro de una celda, simplemente la alineas verticalmente en la parte inferior de la celda, luego haces lo mismo con la celda de puntos y lo mismo con la de precio, en consecuencia te queda todos alineado en la parte inferior. Que como te darás cuenta es lo que trate de emular mediante css.

Cita:

El ejemplo que quiero es algo asi, pero la linea de puntos autoajustable sin tener que especificar el width.

Si te fijas bien no tiene ningún ancho definido.

Código CSS:

Ver original.puntos{
    height:90%;
    border-bottom:1px dashed #666;
    overflow:hidden;
}

Evidentemente no estas leyendo ni tratando de entender este ejemplo, así que más no puedo hacer, solamente me queda pedirte como favor, que hagas una prueba con el ejemplo que puse, sin modificaciones, y que dentro del div "producto" pongas el texto que quieras, no importa cuantos br tenga.

Saludos y espero que logres el resultado que estas buscando