html - CSS style "float: left" hindering use of anchor tag <a>. unclickable

Question

What i am trying to do is line up 3 div tags beside eachother. All the 3 divs include anchor tags, headers and < p > tags. But when i use the style related to the div "float: left" the button becomes unclickable, as well as any css style as "class:hover" wont interact with it.

When i keep the float css style, it remains it desired looks. but interactively it is not up to the desired result.

When i drop the style float, the interaction is as desired, but the looks becomes far from what the desired result is, which is to line them up centered next to eachother.

I have tried to remove all styles one by one which could cause the problem with the anchor tag, but only the float-left seems to cause issues

here is the related html code.

.button {
  transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
  display: inline-block;
  background: none;
  border: 2px solid #f1b24a;
  border-radius: 8px;
  letter-spacing: 2px;
  padding: 0.85em 2.75em 0.85em 2.75em;
  color: #FFF !important;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

<div style="float: left; margin-bottom: 15px;">
  <header>
    <h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
  </header>
  <p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
    auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
  </p>
  <a href="Index.html" class="button" onmouseover="colorSwitch()">More</a>
</div>

<div style="float: left; margin-bottom: 15px; margin-left: 65px;">
  <header>
    <h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
  </header>
  <p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
    auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
  </p>
  <a onmouseover="colorSwitch()" href="Index.html" class="button">More</a>
</div>

<div style="float: left; margin-bottom: 15px; margin-left: 60px;">
  <header>
    <h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
  </header>
  <p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
    auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
  </p>
  <a href="Index.html" class="button" onmouseover="colorSwitch()">More</a>
</div>

question from:https://stackoverflow.com/questions/65933198/css-style-float-left-hindering-use-of-anchor-tag-a-unclickable

Answer 1

I created the code you are trying to do this way, I hope it helped (I used Flexbox instead of float)

HTML Code

 <div class="container">
    <div  class="div1">
        <header>
          <h2 >Heading</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
          auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
        </p>
        <a href="Index.html" class="button">More</a>
      </div>
      
      <div  class="div2">
        <header>
          <h2 >Heading</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
          auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
        </p>
        <a href="Index.html" class="button">More</a>
      </div>
      <div  class="div3">
        <header>
          <h2 >Heading</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
          auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
        </p>
        <a href="Index.html" class="button">More</a>
      </div>

CSS Code

 .container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container div{
    margin: 15px;
}
.container div h2{
    font-weight: bold;
    color: #f1b24a ;
}
.container div p{
    color: #f1b24a;
}
.container div a{
    transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
    display: inline-block;
    background: none;
    border: 2px solid #f1b24a;
    border-radius: 8px;
    letter-spacing: 2px;
    padding: 0.85em 2.75em 0.85em 2.75em;
    color: rgb(177, 187, 44) !important;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}