CODEWITHSUNDEEP
css
yoyoyo
yoyoyo

Reputation: 29

How to make an entire div clickable (table style divs)

Yes, I know, this question have been asked many times and a possible solution is to add style="display:block;" to the link.

For some reason this solution does not work with table style DIVs:

https://jsfiddle.net/exyv8jmw/1/

HTML:

<div class="table">
<div class="tablerow">

    <div class="left">
    <a href="/something.html" style="display:block">
    This is a link</a>    
    </div>

    <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
</div>

CSS:

.table{
    width:500px;
    display:table;
}

.tablerow{
  display:table-row;
}


.left{
    width:50%;
    background:green;
    display:table-cell;
    padding:5px;
}


.right{
    width:50%;
    display:table-cell;
    background:red;
    padding:5px;
}

As you can see, the empty green space is clickable only horizontally, but not vertically. I also tried:

<a href="/something.html" style="display:block"><div class="left">This is a link</div></a>

but it does not help.

Upvotes: 0

Views: 232

Answers (5)

Michael Seltene
Michael Seltene

Reputation: 591

You could add listener to the div id. 

    <div class="table" id="clik">

    document.getElementById("clik").addEventListener("click", function(){
       // document.location = "/something.html";
       alert("hello");
    });

Upvotes: 0

tjcertified
tjcertified

Reputation: 704

Apply the 'left' class to the a element directly, i.e.:

<a href="#" class="left">this is a link</a>

Although this does not allow for additional content, it does make the anchor fill the available space.

Part of the problem is that the anchor tag is, by default, a "span" type tag, which only fills a space as big as its content, disregarding internal divs.

You have to make the anchor tag act like a "block" style element, not its surrounding element, or an internal element.

Upvotes: 0

fabio
fabio

Reputation: 624

Can't you put the div inside the 'a' element?

   <a href="/something.html" >
        <div class="left">
              This is a link </div>
  </a>

Upvotes: 0

Omprakash Arumugam
Omprakash Arumugam

Reputation: 1042

First set .left position to relative, Then set a tag position to absolute and width and height to 100%. 

.table{
    width:500px;
    display:table;
}

.tablerow{
  display:table-row;
}


.left{
    width:50%;
    background:green;
    display:table-cell;
    padding:5px;
    
    position: relative;
}
.left a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.right{
    width:50%;
    display:table-cell;
    background:red;
    padding:5px;
}
<div class="table">
<div class="tablerow">

    <div class="left">
    <a href="/something.html" style="display:block">
    This is a link</a>    
    </div>
    
    <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
</div>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53684

You need to add height: 100%; to the link, .left, and .tablerow elements.

.table{
    width:500px;
    display:table;
}

.tablerow{
  display:table-row;
  height: 100%;
}


.left{
    width:50%;
    background:green;
    display:table-cell;
    padding:5px;
    height: 100%;
}


.right{
    width:50%;
    display:table-cell;
    background:red;
    padding:5px;
}
<div class="table">
<div class="tablerow">

    <div class="left">
    <a href="/something.html" style="display:block;height:100%;">
    This is a link</a>    
    </div>
    
    <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
</div>

Upvotes: 1

Related Questions