How to Create a Clickable Div

Recently I started a newsletter and wanted to provide a link or button in the sidebar so visitors could click on an image or link that would take them to my newsletter page.

After selecting an image and creating a link to the newsletter page, I got to thinkin’ about how I’d make the whole square area clickable.

If you look in the sidebar you’ll see this image which looks kind of buttony:


You’ll notice the darker square where the little character is reading the “NEWS” and there’s a link under that image – “Sign up for the newsletter”.

That square is provided by the HTML <div> tag.  A <div> is basically an invisible square or section that helps group elements that we can then format to our liking.  So if we write a simple example of a <div> it will look like this:

<div>I’m surrounded by divs.  Help!!</div>

You’ll just see a page with the words “I’m surrounded by divs.  Help!!”  That’s it, nothing else.

What we need to do is style the <div> in such a way that the whole square is clickable.

So here’s the first part of the code.  Again, the <div> will establish our square or section and it will have a gray background with a darker border.

<div style=”background:#dddddd; border:solid 1px #bbbbbb;”>

As you can see in this first <div>, I’ve added the style element to the <div> tag.  This is an example of placing style “inline” in the HTML code.  Typically, when you’re working with HTML and CSS, you’ll have a CSS file with most of your styling in the file.  But for this example  we’ll do everything “inline”.

Try it Yourself

Want to try it yourself?  A simple way to play with this code is to download HTML-Kit, which is a free HTML editor, enter the code, save it to a file and view it to see what it looks like.  You can certainly use notepad or whatever text editor you have built into your computer.

Now here’s what makes the whole <div> clickable.  The “display:block” style element of an anchor or <a> tag.

So we style the anchor as a block and then to make that block larger, we’ll add the height and width of the <a>, anchor tag.

Here’s all the code scrunched up.  This is what it looks like in a WordPress sidebar widget:

<a style=”display:block;height:100%;width:100%;” href=”” alt=”Sign up for the newsletter” title=”Sign up for the newsletter”><img src=”” /></a><br/><a href=””>Sign up for the newsletter</a><br/><br/></center></div>

What the clickable divs offer is the surrounding area of an image or link so the visitor doesn’t have to click directly on the image or link, just around it if they can’t seem to click on the image or link directly.  I think this makes it easier for people to sign up for the newsletter.

I’ve also seen sites that implement this in the header.  For instance the text or image in the header is 50% of the header but the whole header become clickable.

So if the visitor is up in the header area, they’ll be able to click on whatever is in the header a bita easier.

But, for some folks, it can get annoying having a large area that’s clickable.  Kinda makes you feel like you’re getting suckered into clicking.   😉