Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

div inside anchor - should it work?

anchor encloses div



7:07 am on Feb 3, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

My navigation menu is javascript, but that's apparently not SE friendly. I like my javascript menu and don't particularly want to duplicate it elsewhere on the page, so I decided to place an html one and then just use javascript to replace it. In trying to mimic the appearance of the javascript one, I tried this out:
#menu { background: url('bgimage.gif'); width:110px; }
div#menu div { border:thin outset; padding:3px; }
div#menu a:link div { text-decoration:none;color:black; }
div#menu a:visited div { text-decoration:none;color:black; }
div#menu a:hover div { text-decoration:none;color:black;background-color:cyan; }

<div id="menu">
<a href="example.com"><div>Examples</div></a>

I wanted it that way so that the whole div would change color instead of just the anchor's little box, and of course I couldn't use javascript to do it with an onmouseover because if the agent executes javascript then, well, the other menu will be in place.

My theory was that if an anchor can enclose an image, why not a div, but I really didn't expect it to work.
It does work in FF, but not in IE6. FF is, however, insisting on underlining the text.

As I type this it occurs to me that I can just make the anchor itself bigger and bordered so I'll do that, but I'm still curious. Do you think it's legitimate and IE6 is yet again not playing nice, or did FF just sort of accidentally do what I intended?


8:04 am on Feb 3, 2007 (gmt 0)

10+ Year Member


I'm not sure what you're trying to accomplish but try something like this:

div.navmenu a {
display: block;
text-decoration: none;

div.navmenu a:hover {
background-color: #a32e20;
text-decoration: none;

That will change the entire background of the <div>, not just the <a> box. If that's what you want then just add the additional <a> styles.

puddletown design

11:08 am on Feb 3, 2007 (gmt 0)

5+ Year Member

thats right, it would be better to just format the anchor as a block element. if you really had to you could use a span inside the anchor also.


6:42 pm on Feb 3, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Thanks for the replies, but like I said in the original post I already figured out that the better way was to apply the styles to the anchor.

So I don't need to know how to fix a problem, all I want to know, for edification, is
<a href="example.com"><div>examples</div></a>

valid or not? Actually put that way I guess it stopped being a CSS question and is now an html/browser question.


6:45 pm on Feb 3, 2007 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Is not valid

<a> is an inline element, and should only contain other inline elements

<div> is a block level element


6:47 pm on Feb 3, 2007 (gmt 0)

10+ Year Member

That will change the entire background of the <div>, not just the <a> box.

That's incorrect; the div's background is unaffected. What's happening is the anchor is expanding to fill the div, so all you see is the anchor and the div's background is blocked. While in this case the difference is mute, if the div had another child besides the one anchor, it would make a significant difference.

Featured Threads

Hot Threads This Week

Hot Threads This Month