Make a Div into a Link

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 do I make entire div a link?

You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.

<a style="display:block" href="http://justinbieber.com">
  <div class="xyz">My div contents</div>
</a>

Turn Div into Link

I think IE's actually responding properly in this case.

A div is a block-level element; so it shouldn't be contained within an inline-element such as, for example, an a. If you use a span (in place of div) does that work in both IE and Firefox?

If you want to make it look like a link (in terms of the cursor), then you may want to use:

a > div, /* please change your mark-up to the following */
a > span {cursor: hand; /* for earlier versions of IE */
          cursor: pointer; /* for, I think, IE 7+ and FF etc. */
}

How can I turn the entire div into a clickable link?

You need to make your a tag full width and height of the li. Moving padding:20px; to your a tag css and adding display:block; allows the links to be clickable, without modifying your HTML.

Update your li tag css to:

.navigation ul li {
  display: inline-block;
}

Update your a tag css to:

.navigation ul li a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 20px;
  display:block;
}

Full Code:

body {  margin: 0;  padding: 0;  font-family: sans-serif;  background: url("../images/bg.png") no-repeat;  background-attachment: fixed;}
header {  background-color: #088CAF;  color: white;  width: 100%;  padding: 20px 0;  text-align: center;}
.navigation {  position: sticky;}
.navigation ul {  background-color: #075E75;  overflow: hidden;  color: white;  padding: 0;  text-align: center;  margin: 0;  border-top: 2px solid #2E2E2E;  border-bottom: 2px solid #2E2E2E;}
.navigation ul li {  display: inline-block;  }
.navigation li:hover {  background-color: #069DAA;}
.navigation ul li a {  text-decoration: none;  color: white;  font-size: 20px;  padding: 20px;  display:block;}
.footer {  color: white;  text-align: center;  width: 100%;  background-color: #2E2E2E;  border-top: 2px solid #099C9E;  position: absolute;  bottom: -800px;  height: 80px;  overflow: hidden;}

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Squallz Test Page</title>    <link rel="stylesheet" href="css/style.css">  </head>  <body>    <header>      <h1>This is a header</h1>    </header>    <div class="navigation">      <ul>        <li><a href="#">Home</a></li>        <li><a href="#">About</a></li>        <li><a href="#">Repo</a></li>        <li><a href="#">Code</a></li>      </ul>    </div>    <div class="footer">      <div class="footerinfo">        <p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>        <p id="info">Personal website by <b>Squallz</b></p>      </div>    </div>  </body></html>

Make a div a link in JavaScript?

you can easily make it so that when you click your div you go to another page, like this (using jQuery)

$('#myId').click(function () {
    window.location = 'newurl.php';
});

Make entire div a hyperlink

<a href='http://www.google.com'>
<div class="pad">
    <div style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
        <div>
            <span>View all</span>
        </div>
    </div>
</div>
</a>

wrap a tag around the whole thing!

HTML - how to make an entire DIV a hyperlink?

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';"> </div>

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>