How to limit link to only div and not Bootstrap column? - html

Question

I have this div with a class of .win_box:
The div is surrounded by a Bootstrap column. The link is allowing the user to allow the link throughout the entire Bootstrap column itself. I only want users to have access to this link on the actual div itself. How do I do this?
.win_box {
position: relative;
left: -12px;
height: 110px;
width: 196px;
background: #353535;
}
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'>
<a href='#'> <div class='win_box'> <i class="fa fa-play" aria-hidden="true" id='video'></i> </div> </a>
</div>

Answer 1

Add
display:inline-block;
to the .win_box class and you are good to go.
.win_box {
position: relative;
left: -12px;
height: 110px;
width: 196px;
background: #353535;
display:inline-block;
}
and you are good to go

Answer 2

You can do this using a display: inline-block;
.win_box {
position: relative;
left: -12px;
height: 110px;
width: 196px;
background: #353535;
display: inline-block;
}
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'>
<div class='win_box' onClick="window.location='https://google.com';" > <i class="fa fa-play" aria-hidden="true" id='video'></i> </div> </a>
</div>
The other option is to use JS for linking. onclick="location.href='www.google.com'"
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'>
<div class='win_box' onclick="location.href='www.google.com'"> <i class="fa fa-play" aria-hidden="true" id='video'></i> </div>
</div>
Fiddle - https://jsfiddle.net/6n2bpep4/2/