Why Does Adding Float:Left to My CSS Make My Link Unclickable

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

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.

Adding float:left to div makes child link not clickable

You have a DIV <div class="horizotal_break clearfix"></div>. That is on top of the two_third DIV. You can't select text from two_third either. If you remove position:relative; from #content .horizotal_break it should be working fine.

css - float right disables links

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

position: relative;

from this id :

#hgpHeaders

And your problem with be fixed .

Cannot click on links in div that is floating on another div

You have pointer-events:none on .menu-1. If you absolutely need to keep this property, add pointer-events:auto to the a tag. However, I would suggest restructuring your code so that the menu can transition without the overlay.

Links are not clickable due to CSS?

.hero in position:absolute overlaps header, you can bring your links on top of it via position:/* any value but static */ + z-index

a {
  position:relative;
  z-index:1;
}

demo:

{  margin: 0;  padding: 0;}
header {  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(zomb2.PNG);  height: 100vh;  background-size: cover;  background-position: center;}
.main-nav {  float: right;  list-style: none;  margin-top: 30px;}
.main-nav li {  display: inline-block;}
.main-nav li a {  color: white;  text-decoration: none;  padding: 5px 20px;  font-family: "Roboto", sans-serif;  font-weight: bold;  position:relative;  z-index:1;}
.main-nav li.active {  border: 1px solid white;}
.main-nav li a:hover {  border: 1px solid white;}
.logo {  width: 150px;  height: auto;  float: left;  color: white;  font-size: 20px;}
body {  font-family: monospace;}
.row {  max-width: 1200px;  margin: auto;}
.hero {  position: absolute;  width: 1200px;  margin-left: 0px;  margin-top: 0px;}
h1 {  color: white;  text-transform: uppercase;  font-size: 70px;  text-align: center;  margin-top: 275px;}
h2 {  color: white;  text-transform: uppercase;  font-size: 35px;  text-align: center;}
.button {  margin-top: 30px;  margin-left: 440px;}
.btn {  border: 1px solid white;  padding: 10px 30px;  color: white;  text-decoration: none;  margin-right: 5px;  font-size: 13px;  text-transform: uppercase;}
.btn-one {  background-color: darkorange;  font-family: "Roboto", sans-serif;}
.btn-two {  background-color: darkorange;  font-family: "Roboto", sans-serif;}
.btn-two: hover {  background-color: darkorange;}

<header>  <div class="row">    <div class="logo">    </div>
    <ul class="main-nav">      <li class="active"><a href="">Home</a></li>      <li><a href="about.html">Learn More</a></li>      <li><a href="zombies.html">Real Zombies</a></li>      <li><a href="ordinance.html">Guns and Ammo</a></li>      <li><a href="news.html">The Latest</a></li>      <li><a href="faq.html">FAQ</a></li>    </ul>  </div>
  <div class="hero">    <h1> Real Zombie Vs. Human Battles </h1>    <h2> Choose your side..</h2>    <div class="button">      <a href="" class="btn btn-one">Zombies</a>      <a href="" class="btn btn-two">Humans</a>    </div>  </div>

anchors not clickable on div float

So here what can you do is:

1) check first by adding border attribute to the anchor so that you can see till where your anchor is floating.

2) use firefox 3d view so that the z-index will be visible and you can easily see what is overlapping your anchor.

4) as @pschueller has mentioned it is working fine in jsfiddler and the right pane is overlapping it from clickable

there is no issue with the float

Floating button objects

The problem is caused by the img that is positioned right above the buttons.

Add:

position: relative;
z-index: 100;

to #cmd-bar.

This will position the buttons above the image that is currently above it.

Navigation Links Suddenly Unclickable

That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.

More on z-index

HTML Links are not clickable, seem overlayed

The problem isn't with z-index, but rather that your container is overlapping your menu items. To correct this, replace padding-top: 200px with margin-top: 200px, and give the container float: left. Alternatively, if you don't want to add any 'offset' with your container, you can clear the float before initialising it with clear: left on the container.

Also note that both your body and .menup1 have invalid background-colours; when specifying hex codes, you must either specify three, four or six letters/digits. Five is invalid.

Both of these have been fixed in the following:

body {  background-color: #ffffff;}
.menup1 {  float: left;  padding-left: 5.5%;  box-sizing: border-box;  font-size: 35px;  background: #ffffff;  color: black;}
a {  color: black;  cursor: pointer;}
p {  color: black;}
.listelemt {}
ul {  float: left;  font-size: 40px;  padding-top: 10px;}
ul li {  padding-top: 15px;}
.container {  position: relative;  float: left;  width: 100%;  margin-top: 200px;}
.container .btnF {  position: absolute;  top: 50%;  left: 50%;  transform: translate(600%, -50%);  -ms-transform: translate(-50%, -50%);  background-color: #555;  color: white;  font-size: 16px;  padding: 6px 12px;  border: none;  cursor: pointer;  border-radius: 1px;  height: 50px;  width: 50px;}
.container .btnB {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-675%, -50%);  -ms-transform: translate(105%, -50%);  background-color: #555;  color: white;  font-size: 16px;  padding: 6px 12px;  border: none;  cursor: pointer;  border-radius: 1px;  height: 50px;  width: 50px;}

<div class="menup1"><a href="google.com">Vorspeise</a></div><div class="menup1"><a href="../../../Suppen">Suppen</a></div><div class="menup1"><a href="../../../Dessert">Dessert</a></div><div class="menup1"><a href="../../../Kuchen">Kuchen</a></div><div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div><div class="menup1"><a href="../../../Konditorei">Konditorei</a></div><div class="container">  <img id="rezept" src="1.jpg" height=auto width=100%/>  <button class="btnF" id="btnF">+</button>  <button class="btnB" id="btnB">-</button></div>

---

Related Topics