htmlxhtmlhyperlinkxhtml-transitional

<div> within <a>


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.


Solution

  • 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/