Is Putting a Div Inside an Anchor Ever Correct

Is putting a div inside an anchor ever correct?

Depending on the version of HTML you're catering to:

HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.
Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.
However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.

div inside anchor

I guess your divs in links cause inconsistency in some browsers (may be your css playing here).

"Semantics", valid markup are some buzz words.

So why would you want DIVs in an <A> tag. You can try someting like this

<a href="#">
       <span class="divstyle">Text 1</span>
       <span class="divstyle">Text 2</span>
</a>

then in CSS

.divstyle { 
    display: block; //and other styles etc
 }

DIV inside link (a href=) tag

No, the link assigned to the containing <a> will be assigned to every elements inside it.

And, this is not the proper way. You can make a <a> behave like a <div>.

An Example ^[Demo]

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

Is it possible for a `div` to act like an HTML anchor tag?

You should be using <a> instead of <div> if those requirements are necessary.

While this wasn't the case in the past, HTML5 allows you to wrap anchor tags around block-level elements:
https://stackoverflow.com/a/1828032/1624862

There are still limitations though. If you wrap your <a> in a <span>, then you have to have inline elements inside. Block-level elements are only allowed inside <a> when it's also wrapped in a block-level element.

Is it ok to place a div inside an a

In XHTML1.0 and HTML4.01: no. a is an inline element that can only contain other inline elements (but not another a).

In HTML5: yes, you are allowed to do that. BUT consider why you would've hundreds of characters in a link.

It's bad for SEO (dilution I believe) and bad for many disabled users ("Hey screen reader, tell me what does this link do?" - "Let me read to you aloud this link for half a minute") and perhaps bad for usability.

Another solution would be to put a link on say your heading in your div or some meaningful text. Then in JS make your div behave like what you wanted to do initially. Then it'll work for users using an assitive technology (screen readers and alike), for keyboard users (they can tab through the link) AND for sighted mouse users with JS.

Insert a div inside an anchor removing the anchor styling in the div elements

a tags usually adds an underline to indicate that it is a link, that's actually just a text decoration, to remove that you can add text-decoration: none; to whatever class you want the style to be removed, or you can add that to the anchor tag directly. See the snippet below for your reference:

.style3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #dadce0;
  box-shadow: none;
  padding: 16px;
  width: max-content;
  gap: 2rem;
}

.text1 {
  line-height: 1.5rem;
  font-size: 1rem;
  letter-spacing: .00625rem;
  font-weight: 500;
}

.text2 {
  line-height: 1rem;
  font-size: .75rem;
  letter-spacing: .025rem;
  font-weight: 400;
}

a{
  text-decoration: none;
  color: black;
  flex: 1;
  height: 100%;
}

<a href="https://stackoverflow.com" target="_blank">
  <div class="style3">
    <div>
      <div class="text1">
        Here is the Text 1
      </div>
      <span class="text2">
        Here is the text 2
      </span>
    </div>
    <div>
      Link
    </div>
  </div>
</a>

Wrapping DIV inside Anchor tag or otherwise

HTML5, you can wrap a DIV inside an A anchor

<a href="page1.html">
    <div>
        <!-- complex layout - WITHOUT ANCHORS OR BUTTONS -->
    </div>
</a>

only if inside  you don't have another <a> or Form-action elements like <button> etc.

Otherwise you can do:

<div id="#redirectLink" data-link="page1.html">
    <!-- complex layout -->
</div>

<script>
document.querySelectorAll("[data-link]").forEach( el =>  {
   el.addEventListener("click", () => window.location.href = el.dataset.link);
});
</script>

or simply:

<div id="#redirectLink" onclick="window.location.href='page1.html';">
    <!-- complex layout -->
</div>

but inline JavaScript is bad design since hard to maintain and debug, so prefer having it in your script files.

Is Putting a Div Inside an Anchor Ever Correct