Make an entire linkable when a module is loa

Question

My question relates to make an entire DIV linkable when a module is loaded inside to it (Joomla 2.5.latest).

I have 4 boxes side by side, all as below in my custom-css.

.box1 {
  width: 22%;
  height: 225px;
  border-radius: 5%;
 -moz-border-radius: 5%; 

etc. etc. etc.

---

In my HTML I have this:

<div class="box1">{module Colours module: Challenges}</div>

I use Joomla 2.5. latest and I loaded a module inside a module, i.e. the colours module challenges goes into box1 and box1 is inside a Joomla module (together with 3 other modules).

---

Every box (1,2,3,4) has a different module loaded inside it.

---

What I would love to have is the ENTIRE box 1 and 2 and 3 and 4 LINKABLE with above plan??? I read about:

<a class="box1" href="http://www.abc.com">{loadmodule}</a>

but this does not work at all, not sure why. If I leave out the {loadmodule} part, then it works, but that doesn´t help me. I need the module loaded inside.

I would like to accomplish my wish in CSS/HTML itself (javascript is too far over my head for now). Any help much appreciated. Thanks, guys.

P.S. I am a complete newbie but trying to learn CSS/HTML fast... :))

Answer 1

Well I'm not sure if I get you right, but I think that adding display: block to your .box1 should make your <a> solution work... (<a> is default inline type).

If your problem is with Joomla, then sorry but I don't know Joomla