Need some advices about HTML & CSS

[romu]

Hi all,
I'm pretty close to have completed my web site re-design using the BlackCanvas theme. But, I have some issues, and as I'm not an HTML/CSS expert, I hope to get some help here.

Please, have a look at the following page: http://www.romuphoto.fr/love/en-travaux/

My problem is about the navigation arrows on the right, the code is pretty simple:

PHP Code:

<div id="navigate">
  <?php $wp_query->is_single = true; ?>
  <div id="previous"><?php previous_post( '%', '&lt;', '' ) ?></div>
  <div id="next"><?php next_post( '%', '>', '' ) ?></div>
</div>

And the associated CSS is:

#navigate
{
    float: left;
    width: 300px;
    font-size: 2.0em;
    font-weight: bold;
    background: #373633;
    border: 1px solid #5B4C49;
    height: 30px;
     display: block;
}

#previous,
#next
{
    vertical-align: middle;
    text-align: center;
     display: block;
    margin-top: 5px;
}

#previous
{
    float: left;
    border-right: 1px solid #5B4C49;
    width: 149px;
}

#next
{
    float: right;
    width: 149px;
    border-left: 1px solid #5B4C49;
}


#previous:hover,
#next:hover
{
    background: #7A5E53;
}

#navigate a:hover
{
    text-decoration: none;
}

I would like to get the following result:
- when the mouse is over, the whole rectangle (next/previous) background is changed
- the whole rectangle (next/previous) is clickable

I've the feeling I'm pretty close to achieve such a result, but I'm stuck, I don't know what to do, except asking for some help.

Thanks.