CODEWITHSUNDEEP
htmlcss
Zorgan
Zorgan

Reputation: 9173

Nesting div in <a> doesn't make the whole div a link

It only redirects to the url when I click on either the image or the text. But not the whole <div>. Any idea? Here's my code:

<a href="someurl">
  <div class="story">
    <img src="photo.jpg">
    <div class="storyText">
      <h1>title</h1>
      <ul>
        <li>list</li>
        <li>list</li>
        <li>list</li>
      </ul>
    </div>
  </div>
</a>

Upvotes: 1

Views: 197

Answers (1)

dippas
dippas

Reputation: 60573

you need to make the a block level element, you can do that by setting display:block in a

a {
  border: solid red; /* demo */
  display: block
}
a:hover {
  background: rgba(0,0,0,.5) /* demo */
}
<a href="someurl">
  <div class="story">
    <img src="//placehold.it/100">
    <div class="storyText">
      <h1>title</h1>
      <ul>
        <li>list</li>
        <li>list</li>
        <li>list</li>
      </ul>
    </div>
  </div>
</a>

Upvotes: 4

Related Questions