You are here: Home » Web Media » How to Create a Clickable Div

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:

newsletter How to Create a Clickable Div

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=”http://billbolmeier.com/newsletter” alt=”Sign up for the newsletter” title=”Sign up for the newsletter”><img src=”http://billbolmeier.com/images/newsletter1.png” /></a><br/><a href=”http://billbolmeier.com/newsletter”>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.   icon wink How to Create a Clickable Div

pin it button How to Create a Clickable Div

Join My Newsletter


Receive tips, tactics and techniques on Blogging, Internet Marketing, Personal Technology, Search, Social Media, Web Media and more from Bill Bolmeier.


{ 9 comments… read them below or add one }

Luca Di Nicola December 23, 2009 at 7:53 am

Excellent tip. I'm not very good with html so when I come across these type of tutorials they are very valuable.
Thanks

Reply

Young December 23, 2009 at 8:11 am

Easy tips to learn how to create a group with div tag.

Reply

pascalsundhar December 26, 2009 at 10:10 am

Nice explanation.

Reply

Bill Bolmeier December 26, 2009 at 9:14 pm

Thanks Luca. With so many HTML/CSS tricks and techniques, it becomes a constant learning process.

Reply

louis vuitton sale June 9, 2010 at 1:58 am

Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum! the-various.com

Reply

louis September 28, 2010 at 7:49 am

Nice~Easy tips to learn how to create a group with div tag.

Reply

Peter December 6, 2011 at 2:59 am

Thanks for sharing this. I am still a beginner when it comes to html and css so this really helps me. Thanks!

Reply

Bill December 6, 2011 at 6:45 am

Good to here it helped, thanks Peter.

Reply

jim December 8, 2011 at 5:02 pm

awesome. Thanks!

Reply

Leave a Comment

Comment Policy: Please leave the best comment you can. Comments like, "Hey Nice Post" or comments that have been automated and make no sense will be deleted. Feel free to argue when necessary, but no name calling. I appreciate it and others will too.

Real Time Web Analytics