Dear css-d gurus: I want to make a box that shows the progress that a non-profit has made toward a certain fund-raising goal. It should look something like:
||XXXXXXXX|| || That is, the box should be sub-divided into two boxes: one with a colored background to show the progress toward the goal, and one with a white background representing the percent left to go. Furthermore, the entire box should be insde anchor tags so that it links to another page explaining more about the project. The problem is that if I do this: <div id="container" style="height: 20px; width: 170px; border: 1px solid black"> <a href="other_page.html"> <div id="completed" style="height: 20px; width: 38%; background-color: green; float: left"></div> <div id="remaining" style="height: 20px; width: 62%; background-color: white; float: left"></div> </a> </div> then I'm violating a rule that says you're not supposed to put anchor tags around block- level elements, and I'm also using floats in a sketchy way. However, if I do this: <div id="container" style="height: 20px; width: 170px; border: 1px solid black"> <a href="other_page.html"> <span id="completed" style="width: 38%; background-color: green"></span> <span id="remaining" style="width: 62%; background-color: white"></span> </a> </div> then I don't get anything because spans are only as wide as the content inside them, and the "width" attribute is ignored. Is there a canonical way to do this? Barring that, does anyone know a good way? ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
