Why wont this div direct me to the site? [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Is there a way I can get the NW div to click to google?
html,
body {
height: 100%;
margin: 0;
padding: 0
}
div {
position: fixed;
width: 50%;
height: 50%
}
#NW {
top: 0;
left: 0;
background: orange
}
#NE {
top: 0;
left: 50%;
background: blue
}
#SW {
top: 50%;
left: 0;
background: green
}
#SE {
top: 50%;
left: 50%;
background: red
}
<a href="https://www.google.com">
<div id="NW"></div>
</a>
<a href="https://www.google.com">
<div id="NE"></div>
</a>
<a href="https://www.google.com">
<div id="SE"></div>
</a>
<a href="https://www.google.com">
<div id="SW"></div>
</a>
Thanks

Answer 1

On my systems (Safari on IOS 14; Edge, Chrome, Firefox, IE11 on Windows10) clicking on a rectangle takes me to the google site if I run the code direct.
If I run it through the the Stackoverflow snippet system though it does not, and that is because the snippet system uses an iframe to run the user's code and google doesn't allow itself to be run in an iframe.
It may be useful to have details of the system and browser and any other contextual stuff (like how is the code embedded in other code?) which may cause it not to function in your system.
Meanwhile it could be worth trying to swap the positioning of the anchor element by making that have the fixed position, top, left and dimensions of its child div so that it is forced to take up non-null space itself and see if that removes the problem.