How to Make an Entire Div Clickable with CSS

How to make a whole 'div' clickable in html and css without JavaScript?

a whole div links to another page when clicked without javascript and
with valid code, is this possible?

Pedantic answer: No.

As you've already put on another comment, it's invalid to nest a div inside an a tag.

However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.

If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.

Update:

In HTML5, placing a <div> inside an <a> is valid.

See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)

How to make entire div clickable(into a link)?

if you don't want to use JS in your code, just add a tag before your columns

check this code

#ana_div {
    height: 400px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f7f7f7;
}

.ikon {
    margin-left: 30px;
    margin-top: 15px;
    position: absolute;
}

.div {
    display: inline-block;
    float: left;
    height: 80px;
    width: 300px;
    margin: 10px;
}

.btn {
    border: none;
    color: black;
    height: 80px;
    width: 300px;
    font-size: 19px;
    cursor: pointer;
    background-color: #fff;
}

.btn:hover {
    background-color: #4d4d4d;
}

 <div id="ana_div">
    <a href="https://google.com">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button1</button>
        </div>
    </a>

    <a href="https://microsoft.com">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button2</button>
        </div>
    </a>
</div>

How to make an entire div clickable except a deep level child div?

The key thing here is to pass the event object so you can check what is the element actually receiving the click.

Since #d3 contains both #d4 and #d5 I'm assuming you don't want those elements to fire either.

If that's the case, you can use Node.contains() to check if the element is a descendant of your target element.

The Node.contains() method returns a Boolean value indicating whether
a node is a descendant of a given node, i.e. the node itself, one of
its direct children, [...]

If you just want to prevent the action for the element #d3 itself, you don't need to d3.contains and just if (e.target != d3) should do.

// find elementsvar main1 = $("#main1")var d3 = $("#d3").get(0) // Get the HTMLElement
// handle click and hover pointermain1.on("click", function(e) {  if (!d3.contains(e.target)) {    console.log("I'll open a window");  } else {    console.log("I'm " + e.target.id + " and won't open a window")  }});
main1.hover(function() {  $(this).css("cursor", "pointer");});

.border {  border: 5px solid RosyBrown;}
.border-thin {  border: 2px solid RosyBrown;}
.divmain1 {  width: 90%;  margin: 0 auto 0 auto;  overflow: hidden;}
.divd1 {  width: 30%;  float: left;}
.divd2 {  width: 60%;  float: right;  margin: 0 0 0 3.5%;}
.divd3 {  margin: auto;  width: 90%;}
.divd4 {  width: 30%;}
.divd5 {  width: 30%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="center border divmain1" id="main1">  <a href="https://www.google.ca" style="display: block">link</a>  <p>    Main  </p>  <div class="border-thin divd1" id="d1">    <p>d1</p>  </div>  <div class="border-thin divd2" id="d2">    <p>d2</p>    <div class="border-thin divd3" id="d3">      <p>d3</p>      <div class="border-thin divd4" id="d4">d4</div>      <div class="border-thin divd5" id="d5">d5</div>    </div>  </div></div></body>
</html>