div inside a href tag

Question

i want to make a div click able and inside this i have another div and this also should be click able or link.

html is

 <a href="#"><div class="box">
    <div class="plus"><img src="aaa.jpg"/></div>
</div></a>

css

.box{
    float:left;
    width:100px;
    height:100px;
}
.plus{
    float:left;
    width:30px;
    height:30px;
}

can i make both divs to link and for different-different url.

and is this proper way use div inside a href ?

Answer 1

No, the link assigned to the containing <a> will be assigned to every elements inside it.

And, this is not the proper way.

You can make a <a> behave like a <div>.

An Example

    a.divlink { 
         display:block;
         width:500px;
         height:500px; 
         float:left;
    }

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

Answer 2

I think you should do it the other way round. Define your Divs and have your a href within each Div, pointing to different links

Answer 3

Nesting of 'a' will not be possible. However if you badly want to keep the structure and still make it work like the way you want, then override the anchor tag click in javascript /jquery .

so you can have 2 event listeners for the two and control them accordingly.

Answer 4

I would use javascript to handle div links:

<div class="box" onClick="window.location = 'link1';">
    <div class="plus" onClick="window.location = 'link2';"><img src="aaa.jpg"/></div>
</div>

Answer 5

I would just format two different a-tags with a { display: block; height: 15px; width: 40px; } . This way you don't even need the div-tags...

Answer 6

This is a classic case of divitis - you don't need a div to be clickable, just give the <a> tag a class. Then edit the CSS of the class to display:block, and define a height and width like a lot of other answers have mentioned.

The <a> tag works perfectly well on its own, so you don't need an extra level of mark-up on the page.