How to make entire div clickable with css only

Question

I'm trying to make an entire div be a clickable link, not just the text. I tried various methods like the one outlined here but all that does is make the shapes disappear.

So far I have this:

http://jsfiddle.net/n5xow3cd/2/

#productfooter {
width:100%;
max-width:500px;
height: 100px;
    margin:0 auto;
 }

#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}

.sterntext {
z-index: 999;
position: relative;
height: 75px;
vertical-align: middle;
display: table-cell;
    padding:0 7px;
}


#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
no-repeat center;
    color:#fff;
    background-size:100%;

}

#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
}

#stern a:hover {
    color:#fff;
}

What can I change to make the whole #stern clickable rather than just the text?

Thanks for any help!

Answer 1

just modify your HTML structure and put div inside of the a element.

<div id="productfooter">
    <a href="#">
        <div id="stern">
             <p class="sterntext">title title title title title title</p>
        </div>
    </a>
</div>

http://jsfiddle.net/n5xow3cd/3/

Answer 2

Can not edit HTML

 /* For functional purposes */ div { width: 100px; height: 100px; } a { display: block; width: 100%; height: 100%; } /* For design purposes */ div { background: #2c3e50; color: white; text-decoration: none; } a { color: inherit; text-decoration: inherit; } 

 <div><a href="#">text here</a></div> 

We just set the a as a block and make him take full width and full height .

Can edit HTML

 /* For functional purposes */ a { display: block; width: 100px; height: 100px; } /* For design purposes */ a { background: #2c3e50; color: white; text-decoration: none; } 

 <a href="#">text here</a> 

We set the a as our block.

Answer 3

You could display .sterntext as table-row and #stern a as table-cell .

 #productfooter { width:100%; max-width:500px; height: 100px; margin:0 auto; } #stern { background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732') no-repeat center; background-size:100%; text-align: center; vertical-align: middle; width: 165px; height: 75px; position:absolute; display:table; } .sterntext { z-index: 999; position: relative; height: 75px; vertical-align: middle; display: table-row; } #stern:hover { background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638') no-repeat center; color:#fff; background-size:100%; } #stern a { color:#000; font-family:arial; font-size:12pt; display: table-cell; vertical-align: middle; padding: 0 7px; } #stern a:hover { color:#fff; } 

 <div id="productfooter"> <div id="stern"> <p class="sterntext"><a href="#">title title title title title title</a> </p> </div> </div>