OK to put lots of content within single link?

This works fine on my computer but im wondering if its a good idea in terms of accessibility, etc.

I have a page of product listings, and I want each listing to link to a product page. The listing is made up of an image and a few photographs of text.

I want the entire listing area to be a link, including white space. So rather than make the images and text links individually, ive put the entire div in a link.

As I said, this is working fine on my computer, but is a good idea for a production site? Thanks

If it's like a grid or something, and you give a visual cue when the user moves the mouse over the row (background color changing etc) along with the cursor becoming a hand, it should be fine if you use the whitespace as part of your link.

If you want me in your website's audience, I would prefer if you wouldn't. When switching between windows, clicking in the window area is the quickest way to switch focus between windows. If like 80% of your window is really a link, I would find that annoying. I think I am not the only one.

The way it sounds there is also plenty of area which you can make behave like a link, such as the image, and the text in the grid. If that would be clickable, that would be big enough a target to hit.

Also imagine your app being used on a touch screen. These sometimes imsinterpret drag (scroll/zoom) and tick gestures. Which is annoying if everything responds to clicks.

Look at the right-side video links on YouTube. These are block-layout spans wrapped in a tags. (Not that just because Google does it means it's a good idea, but...)

If the area has a :hover color (as these do), then it should be clear enough to the user that this is an action item.

Syntactically it's invalid, you cannot put block elements (div, p, table) inside of inline elements (span, a, strong, em).