In HTML/CSS, a href link for the full div

Problem

Here’s what I’m attempting to achieve in HTML/CSS:

I have a variety of heights and widths, but they are all less than 180×235. So I’m going to make a div with a border and vertical-align: middle for all of them. I was able to accomplish this, but now I’m stumped as to how to properly href link the entire div.

My code is as follows:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

Please notice that the style code is inline to make copying and pasting easier.

I read somewhere that I could just add another parent div on top of the code and then do a href within it. However, some study indicates that it will not be legitimate code.

To summarize, I require a href link for the full div (#parentdivimage).

Asked by Adil

Solution #1

You must select one of the following scenarios:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

This is erroneous in terms of semantics, but it will suffice.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

This is logically correct, however it necessitates the use of JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

This is logically correct and functions as expected, but it is no longer a div.

Answered by Ben

Solution #2

Why don’t you remove the div> element entirely and replace it with an a>? Because the anchor tag isn’t a div, you can still style it with display:block, a height, width, background, border, and other attributes. It can be styled to look like a div yet still function as a link. Then you’re not depending on broken code or JavaScript that certain users may not be able to see.

Answered by Surreal Dreams

Solution #3

Do it this way:

The width and height of the parentdivimage should be supplied, and its position should be:

position: relative;

You should add the following divs just inside the parentdivimage, close to the other divs that the parent contains:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

Then, in the css file, write:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

Because the height and width of the span tag are both set to 100%, it will fill out its parent block, parentdiv. Because the z-index of Span is higher than the z-index of other elements, it will appear on top of all surrounding elements. Finally, because span is contained within a ‘a’ element, it will be clickable.

Answered by denu

Solution #4

Two things you can do:

Answered by Stephen

Solution #5

In my experience, it’s probably best to design the anchor tag based on what Surreal Dreams mentioned, but it truly depends on what you’re doing. Here’s an illustration:

Html:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

Then the CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

Answered by Kyle Crabtree

Post is based on https://stackoverflow.com/questions/4465923/a-href-link-for-entire-div-in-html-css