How to Make a Whole 'Div' Clickable in HTML and CSS Without JavaScript

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)

Make entire div area clickable hyperlink

Wrap all your code inside <a> tag instead of <div>.

.block {    text-decoration: none;    width: 200px;    height: 272px;    background:red;    border: 0;    display: block;}.block h3 {  color: black;}.block ul li {  text-decoration: underline;}

<a href="#" title="Read more about Manchester United" class="block">   <h3>Book a season ticket with Manchester United</h3>  <ul>     <li>Read more about Manchester United <span class="bold">></span></li>   </ul></a>

How to make a div clickable?

In HTML5 it's perfectly valid to put a div inside of an a tag.

<a href="https://madhumitha.github.io/Quiz/">
  <div class="Quiz"> 
    <img  src="assets/images/quiz.jpg" alt="Quiz">
    <div class='text_m'> 
      <h1> Quiz Time </h1>
    </div>
  </div>
</a>

Make whole div clickable

The nested <a> is unnecessary, you can either strip it out completely or, if you wish to keep the mouse over button in the pop up div convert it to a <span>

 <div class="col-sm-4 peaceful">
     <div class="pre-inner">
         <img src="http://lorempixel.com/304/188/">
             <a href="http://www.google.com">
                 <div class="pre-info">
                     <h4>See our activity philosophy</h4>
                     <span class="btn btn-success">Click Here </span>
                 </div>
             </a>
     </div> </div>

For further information on why nested <a> tags might act like this considering reading the answer to the following stack overflow question Why are nested anchor tags illegal?

To make whole div clickable?

You can update your html so that the <span> is inside your <a>.

<a href="/{{this.imageId}}/laugh" class="haha sp">
  <i class="material-icons laugh">sentiment_very_satisfied</i>
  <span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>  
</a>

Displaying your <a> as a block element will have it fill up the entire <div>. Then you can float your <span> to the right and style it accordingly until it's where you want it exactly.

.action-time a {
   display: block;
}

.action-time span {
   float: right;
}

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>

Make Div Clickable without Javascript or a or href

Try using cursor: pointer:

.panel-x {  cursor: pointer; /* hand cursor */  border: 1px solid grey;  background: ghostwhite;  display: inline-block;  padding: 4px 11px;  border-radius: 4px;  box-shadow: 0px 1px 1px;  font-family: 'Trebuchet MS';}.panel-x:hover {  box-shadow: 0px 1px 3px;}.panel-x:active {  box-shadow: 0px 1px 3px inset;}

<div class="panel-x" data-toggle="collapse" data-target="#collapseUser">Title</div>
<div class="panel-x" data-toggle="collapse" data-target="#collapseUser">There goes a long text</div>

How to Make a Whole 'Div' Clickable in HTML and CSS Without JavaScript