space between two spans in a link is unclickable

Question

I have the following html code:

<a href="#">
 <span class="span1">test</span><span class="span2">test</span>
</a>

and css code:

.span1{float: left; }
.span2{float: right; }

So the link is test test with about 40px space between the two words "test" and "test". I created the space simply by using css, not by   or by typing space with my keyboard.

The words "test" and "test" are both click-able but the space between them is not.

How can I make the space between the two spans click-able? I have tried to wrap both of the span tags in another span tag but didn't help.

Thank you.

Answer 1

Because the spans are forced into block display (by virtue of having given them float properties), you need to make sure the a also has block display and either overflow: hidden OR clearfix such that it is certain to completely contain the space (and intervening space) occupied by its contents:

a {
    display: block;
    *zoom: 1;
}
a:after {
    clear: both;
    content: " ";
    display: table;
}
.span1 {
    float: left;
}
.span2 {
    float: right;
}

EDIT: based on reported weirdness in IE7:

*+html a * {
    cursor: pointer;
}