Turn a set of divs into a link

I have list elements like this:

<div class="outer">
    <div>Head</div>
    <div>Content</div>
</div>

what i want to have is a link over the whole outer div like if you wrap it with (But unfortunately that ist not valid)

I know that it is possible to use "display:block" for an "a" Tag inside a div to get it to the full size of the div, but unfortunately the size of the divs depend on the (dynamic) content and therefore is not set via css. This means that if I set width and height for said "a" Tag to 100%, then it will take the size of the parent of the outer div.

Is there a valid solution to 开发者_StackOverflow中文版this?

the following might work:

<div class="outer">
    <a href="" class="spec_link"></a>
    <div>Head</div>
    <div>Content</div>
</div>

and the css:

.outer{ position:relative;}

.outer .spec_link{
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}

the link will wrap itself around the outer no matter it's size. I do something similar for blocks with transparency

You could convert the div to span and set them to display:block

<a href="..." class="forced">
    <span class="outer">
        <span>Head</span>
        <span>Content</span>
    </span>
</a>

and use a css rule of

.forced, .forced .outer, .forced .outer > span{
  display:block;
}

Using a bit of JavaScript you can achieve this effect:

<div class="outer" style="cursor:pointer;" 
    onclick="document.location='somepage.html';">
  <div>Head</div>
  <div>Content</div>
</div> 

You could handle the link with Javascript:

<div class="outer" onclick="window.location.replace('yourlink.html');">
    <div>Head</div>
    <div>Content</div>
</div>

Not sure if you are looking for a pure css solution. Jquery allows you to bind a click event:

jQuery('.outer').click(function() {
  window.location = 'http://www.google.com/';
});

<a href="...">
<div>
...
</div>
</a>

is valid with HTML5.