Overlapping Widgets?

URL: http://legacies-reborn.forumotion.com



In the image above, I've highlighted the problem area with red. As you can see, the widget bar has two widgets overlapping one another. This happens no matter what widgets I use and the problem shows up randomly. Sometimes the formatting looks perfect and each widget stays in their own container, but other times they pop out and overlap like this. It tends to only happen when I place my newest custom widget "Affiliates".

Below is the code for the staff widget (the widget that is overlapping the word counter widget)

Code:


<style>
#widget {
border: 2px solid black;
width: 175px;
height: 400px;
}

#main {
width: 175px;
height: 400px;
margin-left: auto;
margin-right: auto;
}

#picture {
margin-left: auto;
margin-right: auto;
}

#staff {
text-align: center;
}

#staff img {
display:inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#staff:after {
content:""; display: inline-block; width: 100%; height: 0;
}
</style>
<div id="widget">
<div id="main">
<div id="picture">
<img id="image" src="https://i.imgur.com/nrY5MbE.png"
</div>
<div id="staff">
<img src="https://i.imgur.com/jucbJL3.png" onmouseover="oda(this)" onmouseout="staffImage(this)" />
<img src="https://i.imgur.com/jucbJL3.png" onmouseover="nike(this)" onmouseout="staffImage(this)" />
<img src="https://i.imgur.com/jucbJL3.png" onmouseover="shinsui(this)" onmouseout="staffImage(this)" />
<img src="https://i.imgur.com/jucbJL3.png" onmouseover="ryan(this)" onmouseout="staffImage(this)" />
<img src="https://i.imgur.com/jucbJL3.png" onmouseover="empty(this)" onmouseout="staffImage(this)" />
<img src="https://i.imgur.com/jucbJL3.png" onmouseover="empty(this)" onmouseout="staffImage(this)" />
</div>
</div>
</div>

<script>
function oda() {
var img = document.getElementById("image");
img.src="https://i.imgur.com/KfUvTxT.png";
return false;
}

function nike() {
var img = document.getElementById("image");
img.src="https://i.imgur.com/KfUvTxT.png";
return false;
}

function shinsui() {
var img = document.getElementById("image");
img.src="https://i.imgur.com/KfUvTxT.png";
return false;
}

function ryan() {
var img = document.getElementById("image");
img.src="https://i.imgur.com/fq8aLCQ.png";
return false;
}

function staffImage() {
var img = document.getElementById("image");
img.src="https://i.imgur.com/nrY5MbE.png";
return false;

}
</script>

This is the code for the word counter widget:

Code:


<form method="POST" name="wordcount">
   <script language="JavaScript">

function countit(){

/*Word count script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

var formcontent=document.wordcount.wordcount2.value
formcontent=formcontent.split(" ")
document.wordcount.wordcount3.value=formcontent.length
}
</script> 
   <table bgcolor="#BFBFBF" border="0" cellspacing="0" cellpadding="0">
      <tbody>
      </tbody> <tbody></tbody>
      <tr style="">
          
         <td style="width: 100%;">
            <textarea style="background:#BFBFBF" rows="12" name="wordcount2" cols="20" wrap="virtual"></textarea> 
         </td>
          
      </tr><tbody></tbody><tbody></tbody> <tbody></tbody>
      <tr style="">
          
         <td style="width: 100%;">
             
            <div align="right">
                
               <p>
                  <input type="button" value="Calculate Words" onclick="countit()" /> <input type="text" name="wordcount3" size="20" /> 
               </p>
                
               <div align="center">
                   
                  <p>
                      
                  </p>
                   
               </div>
                
            </div>
             
         </td>
          
      </tr><tbody></tbody><tbody></tbody> 
   </table>
</form>


And finally, this is the coding for the Affiliates widget

Code:


<style>
#widget {
border: 1px solid black;
width: 185px;
height: 280px;
}

#ourbutton {
font-weight: bold;
border: 1px dotted black;
text-align: center;
margin-left:auto;
margin-right:auto;
}

#affiliates {
text-align: justify;
}

#affiliates after {
text-align: justify;
}

#affiliates img {
max-height: 31px;
max-width: 88px;
padding: 1px;
display: inline-block;
margin-left: auto;
margin-right: auto;
}

</style>
<div id="widget">
<div id="ourbutton">
Our Button <br />
<a href="http://legacies-reborn.forumotion.com/" target="_blank"><img src="https://i.imgur.com/GgPI0EF.png" /></a>
<br />
</div>
<div id="affiliates">
<br />
<img src="https://i.imgur.com/GgPI0EF.png" />
<img src="https://i.imgur.com/GgPI0EF.png" />
<img src="https://i.imgur.com/GgPI0EF.png" />
<img src="https://i.imgur.com/GgPI0EF.png" />
<img src="https://i.imgur.com/GgPI0EF.png" />
<img src="https://i.imgur.com/GgPI0EF.png" />
<img src="https://i.imgur.com/GgPI0EF.png" />
<img src="https://i.imgur.com/GgPI0EF.png" />
</div>
</div>


If anyone can give some insight it would be greatly appreciated. Thank you in advance!

I do not see any overlapping.

You won't if you follow the link. I removed the affiliations widget until I could find a fix because I thought it looked ugly.

Please add it so we can see it.