jyushinx Posted July 15, 2007 Share Posted July 15, 2007 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. Quote Link to comment Share on other sites More sharing options...
AndyB Posted July 15, 2007 Share Posted July 15, 2007 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> Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted July 15, 2007 Share Posted July 15, 2007 alternatively just have 2 tds have the table 100% width and give the cost td align right. Quote Link to comment Share on other sites More sharing options...
jyushinx Posted July 15, 2007 Author Share Posted July 15, 2007 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.