Making my whole <div> clickable

Question

I want to make the whole "topic" div clickable. You can see the code down below. I tried using <a href="##"> </a> before the first div but it will only make the picture clickable and not the whole div.

<?php
   $toppic = $app->get_topics();
   foreach($toppic as $topic){
    echo '<div id="topic">';
    echo '<div id="topicimg">';
      if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) { 
   echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
      } else {
         echo '<i class="fa fa-fw fa-user img-circle"></i>';
      }
      echo '</div><div id="topictekst">';
      echo '<b><a href="https://####/reactie"> '.$topic['topicnaam'].'</b></a>'; 
      echo '<a> - ' . $topic['voornaam'] . " " . $topic['achternaam'] . '</a>' ;
      echo '<a style="float:right; margin-top:15px;"> reacties</a> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
      echo '<hr><a><span class="badge bg-red">' . $board['topic'] . '</span></a>';
      echo '</div></div>';
     }
  ?>

How it looks like

This works!

now the only problem is that because I cant nest the a tag I am not abble to display the reacties on the right because it was styled with a float: right .

<?php
       $toppic = $app->get_topics();
       foreach($toppic as $topic){
        echo '<a href="https://####/reactie"><div id="topic">';
        echo '<div id="topicimg">';
          if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) { 
       echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
          } else {
             echo '<i class="fa fa-fw fa-user img-circle"></i>';
          }
          echo '</div><div id="topictekst">';
          echo '<b> '.$topic['topicnaam'].'</b>'; 
          echo ' - ' . $topic['voornaam'] . " " . $topic['achternaam'] ;
          echo ' reacties <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
          echo '<hr><span class="badge bg-red">' . $board['topic'] . '</span>';
          echo '</div></div></a>';
         }
      ?>

Answer 1

Try to embrace your div in the a tag.

Examples are:

<a href="www.google.com">

     <div></div>
</a>

In the above example, you should be able to click anywhere on your div and you should land on google's page.

Well in HTML5 it is allowed to have a block content like div to be placed inside an anchor tag. This depends on the HTML version your a using because it will not work in HTML 4.

Answer 2

Your code doesn't work because you have nested a element, which is invalid HTML - This is how to do it:

<?php
    $toppic = $app->get_topics();
    foreach($toppic as $topic){
        echo '<a href="https://####/reactie"><div class="topic">';
        echo '<div class="topicimg">';
        if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) { 
           echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
        } else {
            echo '<i class="fa fa-fw fa-user img-circle"></i>';
        }
        echo '</div><div class="topictekst">';
        echo '<b> '.$topic['topicnaam'].'</b>'; 
        echo '<span> - ' . $topic['voornaam'] . " " . $topic['achternaam'] . '</span>' ;
       echo '<span style="float:right; margin-top:15px;"> reacties</span> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
       echo '<hr><span class="badge bg-red">' . $board['topic'] . '</span>';
       echo '</div></div></a>';
    }
?>

Note that I replaced the id attributes with class because you can't have multiple elements with the same ID, so in your css/JS selector you need to address those as .topic { <style> } instead of #topic { <style> } (Same goes for .topicimg )

edit - If you want to show the "reacties" before the icon you can change this line:

echo '<span style="float:right; margin-top:15px;"> reacties</span> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';

With

echo '<span style="float:right; margin-top:15px;"> reacties <span style="color:grey;" class="fa fa-comment"></span></span>';

By removing float:right; from the inner comment icon span and wrapping both the text and the icon in a single span that is floating to the right