button in <div> not working

My button doesn't work when wrapped in my div - which is initially hidden. - it works when its not wrapped in the "caption" div - any ideas?

HTML:

<div id="caption" class="caption-container2"></div>

---

<li
<a class="thumb" name="test" href="images/folio_rollovers/test_rollover.jpg" style="border:none">
<div id="triggers">
<img src="images/folio_icons/test_icon.jpg"  
rel="#award5"/>
</div>

<div class="simple_overlay" id="award5">
<img src="images/awards/award.png"  
style="border:none"/>
</div>


<div class="caption">

<span class="whitetextboldlge">Headline</span>  
<br><br>
<span class="whitetext-italics">
Subhead:<开发者_Go百科br><p>
Body copy goes here</span> <br><br>
<button type="submit" style="border: 1; background: transparent" href="#" rel="div.overlay"> 
<img src="images/awards/award-video.png"></img></button>


</span>
</div>
</a>
</li>

CSS:

.caption-container2 {
margin: 10px 20px 140px 15px;
height: 150px;
border: solid #green 0px;

}

---

You should clean and fix up your HTML first. A <p> tag cannot be contained in an inline element (<span>). You have plenty unclosed tags (<a>, <p>).

---

Because the wrapper div is hidden so all the element inside is hidden two...

try to do something like this:

<div id="wrapper">
  <div class="hiddenContent">hidden content</div>
  <div>put your button here</div>
</div>

---

 <button type="submit" style="border: 1; background: transparent" href="#" rel="div.overlay"> 

this code what u wrote is wrong becoz, we con't give button type="submit" try this

<input type="submit" style="border: 1; background: transparent" href="#" rel="div.overlay">    
or
<button value="Submit" onClick="fun()"/>