3 capas y capa central ocupando todo es espacio entre las otras dos

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......................................... ..................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.

MIra:

Este ejemplo no es lo que necesitas?

Y aquí más ejemplos:

Layout gala

Aunque eso es justamente para lo que se usan tablas, para el texto tabulado.

Suerte!

Gracias por la respuesta. No, no es eso.

A ver si consigo explicarme un poco mejor.

LA estructura es de la siguiente forma. Supongamos un div contenedor de 200px de ancho y dentro la siguiente estructura

Código HTML :

Esto es una prueba del texto que tiene
que ir aqui.................................25

y en el codigo es: div de texto, div de linea de puntos y div de numero

Donde el texto es un texto que no se puede partir, ya que viene de servidor, los puntos suspensivos son un border-bottom dotted de la capa del medio y el numero es otro valor pasado desde servidor.

Mi problema realmente es teoricamente muy facil de plantear. Quiero que la capa de linea de puntos me ocupe el 100% del espacio que queda entre la capa del texto y la del numero.

Personalmente no veo cómo puedas realizar eso sólo con CSS. SI existe la forma de hacerlo, yo no la conozco. Es más probable que puedas resolverlo con el propio lenguaje del lado del servidor que usas (PHP, Ruby, Python o lo que sea), contando la cantidad de caracteres y rellenando los espacios o con javascript.

Muchas gracias, The Fricky. Y a ti también, Sisco.

Me dijeron que quieren hacerlo con CSS y en eso ando.

Estoy casi seguro que se puede hacer con tablas, ya que cuando no le defines un ancho a cada columna, ellas se acomodan según el contenido para ocupar el 100% del ancho de la tabla, es cuestión de jugar un poco con los porcentajes y ver como se comportan las columnas

Hola, HtrMancera. Gracias por contestar.

Creo que no se puede hacer con tablas. El texto que me pasan es un asp:label, y es indivisible. Y que vaya en una linea o dos depende del propio texto, no lo puedo controlar yo. Si fuera seguro en una sola linea, si que podría, pero al ser en dos, y no tener control sobre el texto que me pasan, creo que esa opción es inviable.

Pero gracias por contestar

Yo creo que lo he entendido, te explico mi solución

Hay 3 capas, una contenedora, con 100% de ancho y una imagen de un punto que se repite solo en coordenadas X y display:table-row; (funciona como una fila en una tabla).
Las otras dos capas son las de el nombre y el precio, que tienen display: table-cell (columna de tabla), float, y color de fondo para tapar la imagen del div contenedor.
Supongo que entenderás todo lo del código, y a mi me funciona bien.

Código HTML :

<style type="text/css">
.contenedor {
   position: absolute;
   display: table-row;
   width: 100%;
   height: auto;
   background-image:url(punto.jpg);
   background-repeat: repeat-x;
}
.nombre { 
   position: relative;
   display: table-cell;
   float: left;
   margin: 0 5px 0 0;
   padding: 5px;
   background: #FFF;
}
.precio{
   position: relative;
   display: table-cell;
   float: right;
   margin: 0 10px 0 -5px;
   padding: 5px;
   right: 0;
   background: #FFF;
   text-align: right;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="nombre">Nombre
</div>
<div class="precio">Precio
</div>
</div>
</body>

Espero que te sirva, solo tienes que adaptar el estilo... ten en cuenta que he puesto márgenes i paddings. Puedes modificarlos y jugar con ellos.
Martí

El código de marticps con unos pequeños ajustes, sin necesidad de imagenes

Código HTML :

<style type="text/css">
body {
   font-size: 15px;
}
.contenedor {
   border-bottom: 1px dotted #000;
   clear: both;
   height: 1em;
   padding: 0.2em 0;
   position: relative;
   width: 800px;
}
.nombre { 
   background: #FFF;
   float: left;
   margin: 0 5px 0 0;
   padding: 5px;
   position: relative;
}
.precio{
   background: #FFF;
   float: right;
   padding: 5px;
   position: relative;
   right: 0;
}
.precio:after {
   content: " €";
}
</style>
</head>
<body>
<div class="contenedor">
   <div class="nombre">Llantas</div>
   <div class="precio">30.00</div>
</div>
<div class="contenedor">
   <div class="nombre">Faros</div>
   <div class="precio">25.99</div>
</div>
<div class="contenedor">
   <div class="nombre">Calcomanías deportivas</div>
   <div class="precio">3.50</div>
</div>
</body>

marticps y nasho, gracias por contestar.

El ejemplo esta bien para una sola línea, ahi funciona perfecto. Pero mi problema es que debe de tener dos líneas, como en la tercera entrada del hilo. Y el texto que me pasan es una label desde servidor. Es decir, es puro texto y no puedo controlar donde corta.

No me encantó la solución pero ahí está

Código HTML :

<style type="text/css">
body { font-size: 15px; }
.producto { 
   border-bottom: 1px dotted #000;
   margin: 1em 0;
   position: relative;
   width: 800px;
}
.nombre {
   float: left;
   margin-bottom: -8px;
   margin-left: -5px;
   max-width: 400px;
   padding: 5px;
}
.nombre span { 
   background: #FFF;
   padding-right: 5px;
}
.precio{ 
   background: #FFF;
   bottom: 0;
   margin-bottom: -8px;
   padding: 5px;
   position: absolute;
   right: 0;
}
.precio:after { content: " €"; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="producto">
   <div class="nombre"><span>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</span>
      <div class="precio">30.00</div>
   </div>
   <br class="clear" />
</div>
<div class="producto">
   <div class="nombre"><span>texto texto texto texto texto texto</span>
      <div class="precio">30.00</div>
   </div>
   <br class="clear" />
</div>
<div class="producto">
   <div class="nombre"><span>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</span>
      <div class="precio">30.00</div>
   </div>
   <br class="clear" />
</div>
</body>