Why does adding float:left to my css make my link unclickable?

Question

I have a view with a section defined thus:

<div id="QuestionBody">
        <p><%=ViewData.Model.Body %></p>
        <div id="QuestionEditLink"><%=Html.ActionLink ("Edit","EditQuestion","Question",new {id=Model.QuestionId},null) %></div>
        <div id="QuestionHistoryLink"><%=Html.ActionLink ("History","ShowHistory","Question",new {postId=Model.PostId,questionId=Model.QuestionId},null) %></div>  
        <div id="AnsweringUser"><a href="/Profile/Profile?userName=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid%3Fid%3DAItOawnZ6IhK1C5cf_9wKstNNfSYIdnRp_zryW4">Answered by Sam</a></div>          
    </div>

and this produces a section with some text and a couple of links under it. I wanted the links to be next to each other. I'm new to css and web development but added this to my style sheet:

#QuestionEditLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

#QuestionHistoryLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

and hey presto the links were nicely aligned. unfortunately they are also not clickable and in fact the cursor doesn't change when moving over them either.

So what did i do wrong? how to I use the css to align the two links next to each other so they are still clickable?

EDIT:

This behaviour is in chrome 8.0.552.215 and in firefox 3.6. It works as I would expect in IE 8, annoyingly.

EDIT2:

I have added the page to JSBin : http://jsbin.com/odefa4/edit which shows the issue. Only the question is styled and shows the problem, the links for the answers work ok...

Answer 1

The fix is pretty simple and cross browser too, add this (to your unclickable link):

#QuestionEditLink, #QuestionHistoryLink {
    position: relative;
    z-index: 10;
}

The fix here is the z-index, but it won't work if position isn't relative/absolute/fixed.

For more info on z-index see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Have used this all the time, is simple, works in all browsers (IE6+, FF, Chrome, Safari, Opera).

Since others already said about your CSS issues there, I won't add to it. Just providing a solution, by the way, tested it with your provided JSBin, worked as always!