Jump to content

Using a <div> as a space filler


jyushinx

Recommended Posts

Hi,

 

I'm working on a website for a restaurant. On the menu section, the format is as such: In the first column is the dish name followed by a description (in a span) and then the price in the next column. What I want to do is put a div or a span (whatever would work) after the description and have it automatically stretch from the end of the description to the price column. I would then put a border on the bottom as dots so it has this effect:

 

Hamburger Delicious .............. $4.95

 

The HTML would look something like this:

 

<td>Hamburger<span>Delicious</span><div style="border-bottom:1px black;width:100%"></div><td>$4.95</td>

 

The problem is that a div automatically displays on the next line. If I set the display to inline, then I can't set the width.

 

Any ideas for a solution?

 

Thanks.

Link to comment
https://forums.phpfreaks.com/topic/60085-using-a-as-a-space-filler/
Share on other sites

This might be a suitable workaround once you get dot.gif right

<html>
<head>
<title>Untitled</title>
<style type="text/css">
.dots { width:100%; background: url(images/dot.gif); background-position: center;}
</style>	
</head>

<body>
<table border='0'=><tr>
<td>Hamburger<span>Delicious</span></td><td class="dots"> </td><td>$4.95</td>
</tr></table>
</body>
</html>

The problem with that is the the names of the dishes can vary in length, so using columns isn't ideal.

 

For instance.

 

Hamburger With Everthing ..................... $4.95

Hot Dog                        ....................  $2.00

 

 

So with columns, it can only be as small as the largest dish title. As you can see, it creates big gaps with smaller ones. I need to use a span or a div. And even if I use the dots.gif, I need to be able to set the size.

 

Thanks for the responses.

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.