You should give your spans { display: block; }. Alternatively, you could use the original divs, but use links inside the divs with { display: block; }
-Alex On Tue, Jun 30, 2009 at 1:25 PM, Noel Taylor <noelta...@gmail.com> wrote: > 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/ > ______________________________________________________________________ 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/