<div> inside <a href> display block

[James1]

Hi,

I'm trying to make a clickable link, which is the full size of the outer div, but it also must contain positioned text items inside it. These positioned text items need to have maximum widths, as it is filled with dynamic content from a database, so the height may change but the width not.

I'm having some trouble with how inline and block level elements should be done properly. please help :)

I have been positioning the text items using divs, as I've read that the <span> tag cannot have a width property. Though I have also tried using <span> tags inside.

I have read that placing a <div> inside <a href> is incorrect. Is this the case?
I have set the href as display:block, in external css - is this enough to make it a block level element? And then does that mean I can put a div inside an href?

The strange thing is, it often displays how I want it to (though I may be writing invalid code), but sometimes on a page reload things go weird lol

Any help or articles I can go read up on, much appreciated :)

Thanks :)

[Major_Payne]

I have read that placing a <div> inside <a href> is incorrect. Is this the case?

Yes! Divs are block level tags. You can make the link tags block level when needed with

display: block;

, but putting a div inside is still syntactically incorrect not to mention semantically incorrect.

Hard to tell you exactly since you did not post your HTML/CSS for what you are trying to do.

[milosevic]

A span with display:block set is basically the same as a div anyway.

My thoughts would be either:

A) Don't have the whole thing clickable - is there really a good reason for this? Is the whole thing not being clickable going to stop people from using your site?

B) Use some hacked up JavaScript to make the outer div container have a hover and 'onclick' behaviour and be functionally a link. There are drawbacks to this approach, especially with SEO.

C) Use some other hacked up Javascript with something like jquery's equal height function and absolutely position a transparent display:block link containing &nbsp; (a space) as the anchor text directly over the top of the whole div.

If B or C sound like technobabble to you I would recommend going with A - you're getting into very advanced techniques to achieve an effect which isn't expected behaviour by users (since other sites don't do this)

[James1]

Hi,

Thanks for your replies :)

Right after I posted this, I figured out what I had done wrong! lol
Thanks for confirming that the <div> inside <href> is wrong.

It turns out, that simply using spans with a display:block was the answer :) The display:block seems to allow widths and like you say makes it like a div anyway.


Cheers :)

[Major_Payne]

What you found out is related to this post [webmasterworld.com]. Example was posted for OP there.