Make an entire div clickable to the_permalink(); - php

Question

I have the following code:
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>"><?php the_title(); ?></p>
<p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
</div>
</div>
This ( with some more PHP lines ) turns out into this :
What I need is to have that white box clickable and it should send to the post link/article.
I tried adding
<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>
but it didn't work, or I did something wrong.
Any suggestions?

Answer 1

You can wrap the inner div in an anchor element to turn it into a link, and remove the anchor that's currently wrapping the title.
This is valid in HTML5.
<div class="carousel-caption">
<a href="<?php the_permalink(); ?>">
<div class="carousel-caption-inner">
<p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>">
<?php the_title(); ?>
</p>
<p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
</div>
</a>
</div>

Answer 2

I was able to fix it myself.
This is how I solved it. ( i found this method somewhere, I did not invent it :D )
<div class="carousel-caption container1">
<span class="link-spanner"></span>
<div class="carousel-caption-inner">
<p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>"><?php the_title(); ?></p>
<p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
</div>
</div>
As you can see, I added this code below the div I wanted to make it clickable
<span class="link-spanner"></span>
Then using this CSS:
.container1{
position:absolute;
}
.link-spanner {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
It made my white area become clickable and it takes me to the post link.
Thanks!