Question

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 this?

Answer 1

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