Whole div a clickable link

Question

I am trying to get my whole div a clickable link but I am not sure the correct way to do it. Would anyone be able to help me with this, it would be greatly appreciated. I am new to coding so I am still learning proper coding. Thanks.

.container {
  display: flex;
  margin: auto;
  width: 1052px;
}

.container>div {
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  flex: 1;
  /*grow*/
  height: 210px;
  margin: 45px 10px 0px 10px;
  width: 231px;
}

.container img {
  height: 140px;
  width: 241px;
}

.container>div a {
  color: #353748;
  display: block;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: initial;
}

.container>div a:hover {
  color: #353748;
  display: block;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 5px 10px 5px 10px;
  text-decoration: underline;
  text-overflow: ellipsis;
  text-transform: initial;
}

<div class="container">
  <div>
    <img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
    <a href="https://www.capebretonstartpage.com/pages/about/" target="_blank">About vAdd An Image Add An Image</a>
  </div>
  <div>
    <img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
    <a href="https://www.capebretonstartpage.com/pages/about/" target="_blank">About vAdd An Image Add An Image</a>
  </div>
  <div>
    <img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
    <a href="https://www.capebretonstartpage.com/pages/about/" target="_blank">About vAdd An Image Add An Image</a>
  </div>

</div>

All that you need to do is `enclose the div in an anchor tag`. — ash__939, Jul 24 '20 at 06:02
Anyway next time first [Search your title](https://www.google.com/search?q=make+div+link+site%3Astackoverflow.com&oq=make+div+link+site%3Astackoverflow.com) — mplungjan, Jul 24 '20 at 06:02
@JessieWilliams See the dupe. There were [MANY](https://www.google.com/search?q=make+div+link+site%3Astackoverflow.com&oq=make+div+link+site%3Astackoverflow.com) — mplungjan, Jul 24 '20 at 06:03
[Scroll down the dupe](https://stackoverflow.com/questions/796087/make-a-div-into-a-link), please. Just wrap the div in an A or look at the CSS solutions — mplungjan, Jul 24 '20 at 06:06
Just change `
About vAdd An Image Add An Image
` to this `

About vAdd An Image Add An Image
` or drop the div completely and instead add `.container a { display:block}` to your CSS — mplungjan, Jul 24 '20 at 06:20
That completely messes the whole div. It loses the border and the layout changes — Jessie Williams, Jul 24 '20 at 06:33
That is because you need to now style the A instead of the DIV so you need to change the CSS accordingly — mplungjan, Jul 24 '20 at 06:45

score -1 · Answer 1 · answered Jul 24 '20 at 06:01

-1

You can put the div inside an <a> tag

answered Jul 24 '20 at 06:01

Kiyubi

57
8

Likely reason for downvote is that OP cannot delete this HUGE DUPE when there are answers. The question has been completely covered by the dupe that has 27 answers in it before you answered it – mplungjan Jul 24 '20 at 06:09
Can you possibly show me the code of the div in the tag please. – Jessie Williams Jul 24 '20 at 06:17
Check your comments above someone have already done it – Kiyubi Jul 24 '20 at 06:24
Already posted example in the comments to the question – mplungjan Jul 24 '20 at 06:25

Whole div a clickable link

1 Answers1