<div> within <a>

Question

I have made a simple fragment of html, which contains this:

<a href="#"><div>Something here</div></a>

It obviously alert me that div cannot be inside an <a> tag. I have used a div, because I want the whole box (div in this case) to be a button. So the subclass :hover and a proper button area applies to the whole box, not only a text inside. As far as I remember divs can be used inside tags in html5. I use XHTML 1.0 Transitional. Is there anything I can replace a div with to avoid errors in the code? or should I change xhtml to html5? will it work good without touching the rest of the code? thank you.

Answer 1

You could use display:block.

An example is as follows:

HTML:

<a href="#" class="btn"​​​​​​​​​​​​​​​​​​​​​>Button</a>​​​​​​​​​​​​​

CSS:

​a.btn{
    display: block;
    background-color: Green;
    width: 50px;
    height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
}
a.btn:hover{
    background-color: lightGreen;
    color: Black;
}

​ You can test it live here: http://jsfiddle.net/YdCzY/

Answer 2

Try using this:

HTML:

<a id="block-a" href="#">Something here</a>

CSS:

#block-a {
    display: block;
}