[ Solved – 11 Answers ] CSS – HTML – Make a div into a link

  • We have a <div> block with some fancy visual content that we don’t want to change. we want to make it a clickable link.
  • It something like <a href=”…”><div> … </div></a>, but that is valid XHTML 1.1.

  • You can’t make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.

Css Code
a {
    display: block;

You can then set the width and height on it.

  • Requires a little javascript. But, your div would be clickable.

Html Code
<div onclick="location.href='http://www.example.com';" 	style="cursor:pointer;"></div>

  • This is a “valid” solution to achieving what you want.

Html Code
<style type="text/css">
.myspan {
    display: block;
<a href="#"><span class="myspan">text</span></a>

But most-likely what you really want is to have an <a> tag displayed as a block level element.

  • HTML:

Html code
<div class="feature">
       <a href="http://www.example.com"></a>
  • CSS:

Css Code
div.feature {
        position: relative;    }
    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */

Open in new window :

  • Here’s how to make a div into a clickable link that will open the target URL into a new window.
Html code
<div onclick="window.open('http://www.brightcherry.co.uk/');">

Open in same window :

  • Here’s how to make a div into a clickable link that will open the target URL into the same window.
Html Code
<div onclick="window.location = 'http://www.brightcherry.co.uk/';">

  • The code :

Html Code
  <div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
    <p style='display:inline;color:#ffffff;float:left;'>Whatever</p>     
    <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>

  • You could also try by wrapping an anchor, then turning its height and width to be the same with its parent.
Html Code
<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>

  • This is one of the solution :

Html Code
<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>

  • Try this code :

Html Code
<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

  • You can give a link to your div by following method:

Css Code
<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    font:13px/17px Arial, Helvetica, sans-serif;

  • You can make surround the element with a href tags or you can use jquery and use

Css Code

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment