want two image side by side with different hyperlink html-CodePudding

need help with this need to hyperlink both image with different links only one gets link secound one dosent

<html>

<head>
  <style>
    body {
      **box-sizing: border-box;
      float: left width:10%;
      padding: 2px;
      height: 800px**
    }
  </style>
</head>

<body>
  <div id="banner" style="overflow: hidden; display: flex; justify-content: space-around;">
    <div class="clm">
      <p>
        <a href="https://bigdunestours.com/desert-safari" target="_blank">
          <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="Picture1" style="width: 90%">
    </div>
    <div class="clm">
      <p>
        <a href="https://google.com" target="_self"></a>
        <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="Picture2" style="width: 90%">
    </div>
  </div>
<body>

<html>

need help pls

CodePudding user response：

You want to <a></a> tags to be wrapped around the elements you want to create hyperlink out of. So in this case the images should be wrapped in the a tags.

<html>

<head>
  <style>
    body {
      **box-sizing: border-box;
      float: left width:10%;
      padding: 2px;
      height: 800px**
    }
  </style>
</head>

<body>
  <div id="banner" style="overflow: hidden; display: flex; justify-content: space-around;">
    <div class="clm">
      <p>
        <a href="https://bigdunestours.com/desert-safari" target="_blank">
          <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="Picture1" style="width: 90%">
        </a>
    </div>
    <div class="clm">
      <p>
        <a href="https://google.com" target="_self">
          <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="Picture2" style="width: 90%">
        </a>
    </div>
  </div>
<body>

<html>