Link overlay on div with flexible height?

HTML & CSS
1

Hi there. I am remodeling my website, but I am totally stuck with a problem. I have some divs (fixed width/height) with a pic on top and some text below. These divs have a link overlay, so that the entire div becomes clickable. This works fine if I set the div to e.g. 200x300px, and the link to display as block with a width and height to 100% and offset it -300px to the top. No worries.

My content is fluid so it is accessible on cellphones and tablets too, and when the page width gets below a certain point, I set the height to auto, so it expands with the text. And here’s my problem… How on earth can I make the overlay link to expand to the entire div, no matter what the flexible height is? Setting a negative margin doesn’t work in this case.

Here is an image, so you’ll get an idea what I wish to achieve:

Thanks :slight_smile:

2

Hello,

Set the link to position absolute and the parent div to position relative. Then you can do away with the negative margin. Then set the anchor to height/width 100%.

3

Ooooh yes! That does the trick :smiley: Thank you very much, EricWatson. This has been bugging me for hours. Well, on to coding again :slight_smile: