How come the hyperlink doesn't work on part of my div?

http://geodit.com:8000/

I开发者_StackOverflow社区f you try to click between "Spear St. Oakland" and the description, you'll notice that the anchor takes you nowhere. That's because there's a padding between them.

How do I get the hyperlink to work when the user clicks between the text?

Try putting the padding on the a element(s), instead of the div elements.

Your code is unnecessarily complex. For example you don't need to wrap everything (such as each link) in a DIV (or the other way round). Just style the link directly, possibly setting it's display style to block so that it behaves like a div.

If you merge both links into one then your problem will go away and you wouldn't need to "fake" the links with cursor: pointer.

Here an example how simple your HTML could be:

<div class="awallpost grid_doc_holder sub" data-image="http://s3.amazonaws.com/fabletest/7cgeq8hkdt"> 
  <a href="/d/1339" class="trans_caption "> 
    See the sun whispering the light of our days from last summer...
  </a> 

  <div class="trans_caption_over"> 
     <a href="#" data-holdclass="positive_hold" data-content_id="1339" data-score="1" class="upvote_button positive overlaybutton" name=""><img src="/media/img/brightmix/star.png"> Great Find!</a> 

     <a href="/d/1339" class="extras"> 
       <em><img src="/media/img/brightmix/placedot2_white.png" align="texttop" width="12" height="auto">  Spear St. Oakland, 94107</em> 
       <span>Hey it&#39;s weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset ...</span>
     </a> 
   </div> 

   <div class="title_text_only"> 
     See the sun whispering the light of our days from last summer...
   </div> 
   <div class="desc_text_only"> 
     Hey it&#39;s weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset was so gorgeous and soft just perfect for my &amp;amp;quot;cream ...
   </div> 
</div> 

You do not have a link between the text. You have TWO links. What is confusing is the

.grid_doc_holder {
    cursor: pointer;
    text-align: center;
}

which shows the hand when you are not over the links too You could consider making the outer container clickable

I believe you want to just put your div(or Divs) within an A tag, that will make it all clickable.