div clickable with padding

Question

I want to make my whole div clickable so I changed the style of the link in the div so it takes the whole size of the div. But when I add padding to the div, the background does expand, but my link doesn't.

Here is what I have :

html :

<div id="b_register">
<a href="#"> Register </a>
</div>

css :

#b_register {
    background-color: #CCCCCC;
    display: block;
    float: left;
    font-size: 16px;
    height: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 10px;
    text-align: center;
    width: 110px;
}


#b_register a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color:white;
}

#b_register:hover{
    background-color: #009FD6;
}

Or you can also go there
http://jsfiddle.net/EycDQ/1/

What I want is to make the div clickable even with paddings, and without using any Onclick event on the div.

Thank you!

Answer 1

Can you move the background color, hover effect and padding to the anchor tag instead of the div element?

Anchors will have just their text be clickable unless they have some sort of background, or use padding to expand the clickable area. Spacer gifs (1px by 1px transparent .gifs) are used for this purpose on items that need to be transparent, if for some reason the div must have the background color/hover effect.

I've modified your fiddle to change just the following:

#b_register a {
    background-color: #CCCCCC;
    padding: 10px;
    }

    #b_register a:hover{
    background-color: #009FD6;
    } 

http://jsfiddle.net/EycDQ/9/