Pedro António Pedro António - 23 days ago 16
jQuery Question

Anchor around div makes it clickable outside of the div itself

Programming beginner here, and I'm having a lot of trouble solving this issue with the anchor being clickable outside of my div.

The div has a sliding tab that comes in from the right with a randomly generated film, and the whole tab should be clickable to be redirected to the film's imdb page.
I have read about it and tried the solution of making the div "display: table-caption", which does fix that, but brings up a myriad of other issues where I have to integrate a margin on the left (it glues the div to the very left otherwise), which works for my specific screen but gets completely offcenter with the smallest of screen/zoom changes.

Is there a more elegant solution to doing so? I just couldn't get the positioning right at all when making the div's display be "table-caption", and nothing else worked.

HTML for the div:

<a id="filmAnchor" target="_blank">
<div id="replyDiv" class="blood">
<div id="newreplyDiv">
</div>
</div>
</a>


Thank you in advance for any help provided! Here's the codepen for the project:

http://codepen.io/ankee/pen/qqOJXa

GvM GvM
Answer

Try this.

    #filmAnchor {
     max-width: 1000px;
     display:block;
     margin:auto;
    }
    #newreplyDiv {
     //remove width:1000px;
    }
Comments