Wrap link <a> around <div>

Question

Is it possible to wrap the <a> tag around the <div> as follows:

 <a href=etc etc> <div class="layout"> <div class="title"> Video Type <div class="description">Video description</div> </div> </div> </a> 

Does Eclipse tell me the div is in the wrong place? If it is not allowed. How can I make the entire "layout" class become a link?

Answer 1

This structure will be valid in HTML5, because in HTML5 anchors can wrap almost any element, with the exception of other bindings and form controls. Most browsers currently have support for this and will parse the code in question as valid HTML. The answer below was written in 2011 and may be useful if you support legacy browsers (* cough * Internet Explorer * cough *).

---

Older browsers without HTML5 parsers (like Firefox 3.6) will still get confused about this and possibly ruin the DOM structure.

Three options for HTML4 - use all the built-in elements:

 <a href=etc etc> <span class="layout"> <span class="title"> Video Type <span class="description">Video description</span> </span> </span> </a> 

Then style with display: block

---

Use JavaScript and :hover :

 <div class="layout"> <div class="title"> Video Type <div class="description">Video description</div> </div> </div> 

And (assuming jQuery)

 $('.layout').click(function(){ // Do something }): 

and

 .layout:hover { // Hover effect } 

---

Or finally, use absolute positioning to place the anchor a with CSS to cover the whole .layout

 <div class="layout"> <div class="title"> Video Type <div class="description">Video description</div> </div> <a class="more_link" href="somewhere">More information</a> </div> 

And CSS:

 .layout { position: relative; } .layout .more_link { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; text-indent: -9999px; z-index: 1000; } 

This, of course, will not work with older versions of IE.

Answer 2

While the <a> tag is not allowed to contain the <div> element, it may contain other inline elements, such as <span> .

When I ran into a problem, I changed the div tag to <span> . Since the span tag is an inline element, you need to apply display:block to the css of your <span> element to make it behave like an element of a <div> block. This must be a valid xhtml and does not require javascript.

Here is an example:

 <a href="#"> <span style="display:block"> Some content. Maybe some other span elements, or images. </span> </a> 

Answer 3

Timothy's solution is correct ... instead of wrapping the anchor around the div ... you just give the layout to the anchor element with the display: block and add the size and width of the anchor ...

 .div_class { width: 100px; height: 100px; } .div_class a { width: 100px; height: 100px; display: block; } <div class='div_class'><a href="#"></a></div> 

Answer 4

Another simple solution is to simply add the onclick event handler to the div as follows:

 <div class="layout" onclick="location.href='somewhere'"> <div class="title"> Video Type <div class="description">Video description</div> </div> </div> 

This works great for me, but there is one little magic. I don’t know what it looks like in a search engine. I’m afraid that Googlebots might not find this link, so I am also inclined to include the traditional HREF link somewhere in the block like this:

 <div class="layout" onclick="location.href='destination_url'"> <div class="title"> Video Type <div class="description">Video description</div> </div> <a href="destination_url">This is a link</a> </div> 

Answer 5

You just want to style the "a" tag as display: block;

Eclipse correctly tells you that your HTML is not specified (since the div tag is not allowed in the anchor tag).

But, since you seem to want to be visual , making the anchor look like a big ol-box, and then just create it as such :)