How to make whole view linkable? - drupal

Question

I want to make the whole view linkable.
This is my rewrite rule:
<div class="news_column_wrapper z-depth-1 card">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</div>
This is my view field screenshoot, I want to make the whole box clickable:
I have tried with
<div class="news_column_wrapper z-depth-1 card">
<a href="[path]">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</a>
</div>
but nothing happens. How can I achieve that?

Answer 1

I think it's more an HTML issue than a Drupal one.
The <a> tag is an inline tag, and you have placed <div> tags inside of it. The natural display of the <a> tag will make that, only the text will be clickable.
What you can do is use CSS to make the <a> a block element, therefore, making the clickable zone extend to the whole block.
First add a class to your link:
<a class='block_link'>
<h2>My title</h2>
<div>My content</div>
</a>
Then, in your CSS, make the <a> tag displaying like a block.
a {
display:block;
}
That should do the trick.