Wrap link around

That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you’re supporting legacy browsers (*cough* Internet Explorer *cough*).

---

Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.

Three options for HTML4 – use all inline elements:

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

Then style with display: block

---

Use JavaScript and :hover:

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

And (assuming jQuery)

$('.layout').click(function(){
    // Do something
}):

And

.layout:hover {
    // Hover effect
}

---

Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="https://stackoverflow.com/questions/5320404/somewhere">More information</a>
</div>

And CSS:

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

This won’t work with older versions of IE, of course.