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

Answer 1

hmmm sounds like a simple bug often found with multiple floats, you could try adding a clearing element after the links i would use something like

<b class="clear"></b>

.clear{
float:none;
clear:both;
font-size:0px;
line-height:0px;
height:0px;
}

that should be fairly cross browser, you may need to add   inside so its

<b class="clear">&nbsp;</b>

Answer 2

Your code will be invalid as you are using IDs when this should be a job for classes. This will do what you want:

#AskingUser {
    border: none;
    float: right;
    width:auto;
    padding: 2px;
    position: relative;
    text-align: right;
}

and add

#QuestionBody {
    border-bottom: 1px dotted black;
    overflow: hidden;
}

I've left it as IDs but you should adjust all your CSS and HTML so that they are classes instead

.askingUser {} and <div class="askingUser"></div>

if that makes sense.

Answer 3

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!

Answer 4

The usual reason is that there's a transparent layer on top. It's normally caused when a box is wider than you think and has a transparent border/padding. Use CSS to apply a temporary border to all items and you'll check whether it's the case.

Update #1

div, span, p{
    border: 1px solid red;
}

Update #2

I can see that #QuestionEditLink and #QuestionHistoryLink are floating. That means that they no longer use space in the page flow. So when you display #AskingUser next it starts at the same point and, being the last one on the page, it gets displayed on top of the two other boxes.

Your layout appears to be fully vertical. I presume you don't need any float: left at all.

BTW, you have lots of duplicate IDs.