I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?

Example code:

<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
            <div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>

My test page is at . Updated daily.

Thanks for the help.

I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?

Example code:

<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
            <div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>

My test page is at http://www.designbyhawk./pixel. Updated daily.

Thanks for the help.

• javascript
• html
• css

• 3 <a href=""><div></div></a>? – JCOC611 Commented Feb 15, 2011 at 23:19
• 4 @JCOC611 a elements are inline, and therefore cannot contain block-level elements such as div. Browsers will try to "fix" this for you, and there's no guarantee what they'll do. – lonesomeday Commented Feb 15, 2011 at 23:23
• 2 Asked and answered soooo many times... See: Using Div's instead of anchors or How do you make a div tag into a link or Turn Div into Link or even Turn a div into a link... (short answer: you don't. You turn a link into a div...) – Shog9 Commented Feb 15, 2011 at 23:26

6 Answers 6

You don't need to do that. There's a perfectly simple and standards-pliant way to do this.

Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.

See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.

Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.

If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.

It is acceptable, only it's not good for SEO.

Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)

It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.

If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:

a {
   display: block;
   padding: 10px;
   width: 200px;
   height: 50px;
}

HTML:

<div class='frommage_box'>
    <a href='location.html'>CONTENT GOES HERE</a>
</div>

CSS:

.frommage_box a{
    display:block;
    height:100%;
}

By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.