<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

Use

<div onclick="..">...</div>

or a display: block; on your a-tag (http://green-beast.com/blog/?p=74)

Answer 3

Try using this:

HTML:

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

CSS:

#block-a {
    display: block;
}

Answer 4

You could try using 'span' elements within the 'a' element instead of divs...

You can apply styles to the span so that it behaves just like the div you wanted (e.g. rich content which is also overally a link).

AFAICS, the only difference between span and div are the default styles, and the elements they're allowed to be children of. But I am willing to be corrected by more learned contributors...

Answer 5

It is way more easier at least

`<div onclik="window.location.href='url'">
</div>`