Question

I’m doing a menu for a restaurant that they dynamiclly add. it looks like this

Dish Name                                            Price
Content in the dish,Content in the dish,Content in the dish,
Content in the dish,Content in the dish.

What i want to do is to get the blank space dotted, with . or dotted border.
But i cannot figure out how to get the css to autoadjust the width of the blank space div.
The dishnames could be longer then “dishname”.
Any1 have a solution for this?

EDIT
The price and name is in 2 divs already with floats on them

.dishHead 
{
font-family:Verdana;
font-size: 18px;
color:#262626;  
float:left;
font-weight:200;
}

.dishPrice
{
font-family:Verdana;
font-size: 14px;
color:#262626;  
float:right;
}

Edit2:
The whole thing is structured as below:

a div that floats right or left
the left floating head, the right floating price, and a description below.
I need a div between the head and price without affecting the whole div it lies in

Answer 1

I think I would do it with a background image on the whole of the "heading" part then use a background color on the name and price div to cover the image however that will only work if the background is a plain colour.

In answer to your question to get a third div to take up the remaining space between the left and right divs you would use overflow:hidden on it so an example using a dotted border might look like this:

Example Fiddle

CSS:

.dishHead {
  font-family:Verdana;
  font-size: 18px;
  color:#262626;  
  float:left;
  font-weight:200;
}

.dishPrice {
  font-family:Verdana;
  font-size: 14px;
  color:#262626;  
  float:right;
}

.spacer {
  overflow: hidden;
  border-bottom: 3px dotted #000;
}

HTML:

<div class="dishHead">Dish Name</div>
<div class="dishPrice">Price</div>
<div class="spacer">&nbsp;</div>
<div class="dishContent">
Content in the dish,Content in the dish, Content in the dish,
Content in the dish,Content in the dish.
</div>