css - float right disables links

Question

Why are my links becoming disabled when I try to make the span they are in float right?

HTML:

<span id="spnLoginRegister">
    <a href="login.htmls" type="text/html">Login</a>
    | 
    <a href="register.html" type="text/html">Register</a>
</span>

CSS:

#spnLoginRegister{
    position: relative;
    right: 0px;
    font-size: 20px;
    margin-top: -10px;
}

-- or --

#spnLoginRegister{
    float: right;
    font-size: 20px;
    margin-top: -10px;
}

Both of these CSS methods disable to links. Then I remove the float: right; part, the links work just fine. I feel like the solution is very simple but I'm just not seeing it.

Here is the link the the site: http://friendshipodyssey.com/

Answer 1

As i saw your online page , You have to delete this property :

position: relative;

from this id :

#hgpHeaders

And your problem with be fixed .

Answer 2

There is no problem here in your code : jsfiddle + jsfiddle

Please check your other CSS codes and its better to user the <span> tag like this:

<a href="login.htmls" type="text/html"><span>Login</span></a> 

Try using <div> instead of <span>

Answer 3

I have checked your site, http://friendshipodyssey.com/

Solution:

Just put span id="spnLoginRegister" & hgroup id="hgpHeaders" inside a DIV and give CSS property as width: 100% & height:150px,

Also for #hgpHeaders, apply CSS property float:left.

Hopefully it solves your issues