title: Why does adding float:left to my css make my link unclickable?
body: <p>I have a view with a section defined thus:</p>
  
  <pre><code>&lt;div id="QuestionBody"&gt;
          &lt;p&gt;&lt;%=ViewData.Model.Body %&gt;&lt;/p&gt;
          &lt;div id="QuestionEditLink"&gt;&lt;%=Html.ActionLink ("Edit","EditQuestion","Question",new {id=Model.QuestionId},null) %&gt;&lt;/div&gt;
          &lt;div id="QuestionHistoryLink"&gt;&lt;%=Html.ActionLink ("History","ShowHistory","Question",new {postId=Model.PostId,questionId=Model.QuestionId},null) %&gt;&lt;/div&gt;  
          &lt;div id="AnsweringUser"&gt;&lt;a href="/Profile/Profile?userName=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid%3Fid%3DAItOawnZ6IhK1C5cf_9wKstNNfSYIdnRp_zryW4"&gt;Answered by Sam&lt;/a&gt;&lt;/div&gt;          
      &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>#QuestionEditLink
  {
      color: #666666;
      width:auto;
      float:left;
      padding:2px;
  }
  
  #QuestionHistoryLink
  {
      color: #666666;
      width:auto;
      float:left;
      padding:2px;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>EDIT:</p>
  
  <p>This behaviour is in chrome 8.0.552.215 and in firefox 3.6.  It works as I would expect in IE 8, annoyingly.</p>
  
  <p>EDIT2:</p>
  
  <p>I have added the page to JSBin : <a href="http://jsbin.com/odefa4/edit" rel="noreferrer">http://jsbin.com/odefa4/edit</a>  which shows the issue.  Only the question is styled and shows the problem, the links for the answers work ok...</p>