I’m trying to make the whole div (contentpad) clickable not just the h3 or h4…but i cant figure it out… seems simple 
<div class="contentpad">
<h3 class="aw">Header3</h3>
<h4>header4</h4>
</div>
It might SEEM simple, but it really isn’t. Probably the best way to do it is with a bit of javascript, jQuery actually, does the job nicely.
Hi enwise,
Yeah, LaynRed is right, block elements don’t take well to these kind of requests.
JavaScript either through jQuery or plain old onclick should give you want you want.
<div class=“contentpad” onclick=“alert(‘Do something here’);”>
<h3 class=“aw”>Header3</h3>
<h4>header4</h4>
</div>
Alternatively, re-arrange your design to make it obvious where to click. One must ask the question why would a user click on what might appear to be empty space?
Regards,
David
From an HTML standpoint, if you are trying to make the entire div a clickable link, you could try putting an anchor tag inside of the div with display:block; set in the CSS along with the width and height at 100%. This might work.
This isn’t the most proper of solutions, but the only answer I can come up with to make an entire div function as a clickable element using HTML / CSS.
thanks 4 the help 
ill go with a jquery solution
<div id="example" onclick="clickable">
<p>Here is some dummy text</p>
<p>Here is some dummy text</p>
<p>Here is some dummy text</p>
<p>Here is some dummy text</p>
</div>
#example {
background:#cccccc;
cursor:pointer;
}
function clickable () {
alert("You have created a click div");
}
Are you actually linking this out to another page, or site?
If so:
What if JavaScript is disabled, do you have a fallback solution?
As a developer, you can never make assumptions, as assumptions lead to less users
Unobtrusive example with a toggle.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Unobtrusive Event Handling</title>
<script type="text/javascript">
window.onload = function() {
(function() {
var objContentPad = document.getElementById('contentpad');
if(!objContentPad) return;
objContentPad['onclick'] = (function() {
var boolClicked = false;
return function(objEvt) {
objContentPad.className = boolClicked?'':'clicked';
boolClicked =! boolClicked;
return false;
}
})();
})();
}
</script>
<style>
#contentpad {
border: 1px solid black;
width: 500px;
height: 500px;
}
#contentpad.clicked {
background-color: red;
}
</style>
</head>
<body>
<div id="contentpad">
<h3 class="aw">Header3</h3>
<h4>header4</h4>
</div>
</body>
</html>
oddz, it might be unobtrusive but it’s not going to be very graceful for the JavaScript deficient. I would go with what Alex said and include an anchor which spans the element in question (using z-index to overlay the element over any content if needed). It’s semantic because it’s providing an anchor related to the element (inside it) which directs the user… plus it requires no scripting (to remove the text just use a negative text-indent).
It isn’t simple.
A few points to consider:
(a) Why do you not want the heading elements to be clickable? You don’t have to have them styled as links, but unless there is a good reason to exclude them, I would just put an onClick event on the <div> and let it cover the whole lot.
(b) Is the click going to be a link to another page, or an action? If it’s a link, you should put an <a href=“…”> around the key text or image content in the <div> so that it is accessible to people without Javascript fully operational.
(c) What affordance are you giving that the div is clickable? Will there be any styling cues or other pointers that people can click on the <div> contents?
Right. This would seem to be the best solution in my eyes.
thx for the help i decided to go with Alex’s solution since it doenst use javascript :)… I’m not sure if I did it the right way because its not validating… here what I have
<div class="pad"><a href="services/pages">
<h3 class="aw">Pages</h3>
<h4>text text text text.</h4>
</a></div>
.pad a{
display:block;
height:100%;
width:100%;
}
XHTML 1.0 Strict is the doctype
There was a CSS quiz on this actually.
I’m not sure if I did it the right way because its not validating… here what I have
Your a is wrapping blocks still. A’s are inline, headers are blocks. Inlines are like water and blocks are like buckets. Buckets can hold water but water can’t hold a bucket. Except in HTML5, where it’s legal to wrap an anchor around a block.
The easiest pure-HTML solution is wrapping an anchor around every block element inside. Any click on any element inside would go to the same address. This makes for messy HTML code, but I’d do it.
If the div is fixed height you could use an example from the CSS quiz… damn but they are numbered so finding it would take a while…
*edit http://www.sitepoint.com/forums/showthread.php?t=602808 Quiz 2. I used it temporarily on a page before the client changed his mind on the design. IE6 was still a little wobbly but it’s an interesting idea.
Hi,
As Stomme poes explained your code is illegally nesting block level elements in an inline element. An anchor is an inline element and even if you change it’s display to block via css the validator still sees it for what it is, an inline element.
That method that cooper linked to is my preferred method. The absolute positioned anchor just sits there quietly on it’s own and covers the entire div with width and height at 100%. That takes care of dynamic heights in all browsers except IE6.
http://www.css-lab.com/misc-test/click-div.html
That would be messy, I don’t think I could bring myself to do that.
Paul’s Solution in Quiz#2 did use fixed heights for the sake of catering to IE6. In that example the anchor is still set as a block level whereas the nested span was the element that got the absolute positioning along with the defined height once again for IE6.
It is possible to do this for dynamic heights in IE6 with the AP anchor method. IE6 will not give the BG color changing on hover though since it only supports :hover on an anchor.
(Dynamic height div and anchor)
http://www.css-lab.com/misc-test/click-div-4.html
The BG color changing on hover in that example is coming from div:hover and IE6 would need the suckerfish hover script to comply.
Sadly though this is another one of those situations where IE6 requires an extra foo div with overflow:hidden on it since it will only work with height:999em; for IE6 since it chokes on height:100% on AP elements.
Once again IE spoils everything but you can give it just enough to work or bend over backwards and give it special attention if you want to support psedou hovers with a script.
http://www.css-lab.com/misc-test/span-hover-ie6.html
Hope that helps.
I do it regularly… however this is in cases where two items or possibly possibly three in a box are supposed to be clickable… like both a small image AND the text and maybe also the header… if it were more items, then likely I wouldn’t for the mess factor. I don’t think I’ve had any boxes yet where many many items inside are clickable.
What I don’t like about the abso-po’d anchor solution is the inability to highlight text. So I would use it, but not where I think people would want to highlight or copy text.