how do I make a link out of a div?

[edzillion]

I am trying to make a link out of the header image of a newsletter I am designing. headerPane has a background image and datePane floats on top of this div (float:right;z-index:2)
I need to make the whole of headerPane link to the homepage. Any ideas?

<div id="whiteBorder">
<div id="mainContainer">
<div id="headerPane">
<div id="datePane">12th Jan 2008</div>
</div>
<div id="title"><h1>Newsletter</h1></div>
<hr />
<div id="content">
<h1>Content</h1>

Thanks
Ed

[D_Blackwell]

This seems more like CSS question.? Does datePane have to float on top with z-index:? You may have multiple CSS options for this if there is some flexibility there as well. That may not be necessary for what you want. It may be sufficient to just let it sit inside its container.

[graykat]

I've done this before with success:

<div id="whiteBorder">
<div id="mainContainer">

<a href="theplaceyouwanttogo"><!-- added -->

<div id="headerPane">
<div id="datePane">12th Jan 2008</div>
</div>

</a><!-- added -->

<div id="title"><h1>Newsletter</h1></div>
<hr />
<div id="content">
<h1>Content</h1>

[penders]

<a href="theplaceyouwanttogo"><!-- added -->

<div id="headerPane">
<div id="datePane">12th Jan 2008</div>
</div>

</a><!-- added -->

Bear in mind, however, that although this might get the job done in most browsers (at the current time) when viewed as "text/html", it is not valid HTML and will certainly break under XHTML.

The <a>nchor element cannot contain block-level elements (ie. <div>). The <div> needs to contain the <a>. The <a> can be styled to mostly fill your headerPane container (although the floated <div> might hinder this?). This should be accessible. To cater for the areas missed by the <a>, you could add a JavaScript onclick event to the headerPane container?