Is it possible to make a div position relative to a non parent div or is there a better way?

Question

I am working on a FAQ page for a rustic home furnishings company. The questions are buttons that, when clicked, expand to show the answer. As of right now, I either have to put the footer way down so it never overlaps which looks awful, or let it overlap, which also looks awful.

The problem is, the buttons (and text they reveal) need to be centered in a secondary background, but the footer needs to span 100% width of the page. If I make the footer a child of the questions div width=100% makes it only span the questions div.

I want the footer to move down as the questions' answers are expanded, so I need the footer's vertical position to be relative to the questions div.

<div id="questions" class="auto-style22" style="position: absolute; width: 591px; height: 466px; z-index: 8; left: 395px; top: 323px">
<script type="text/javascript">
function toggleMe(a){
 //Collapse all answers
   var elements=document.getElementsByClassName("button");
   for (var i=0;i<elements.length;i+=1){
    elements[i].style.display = 'none';
   }
 //Toggle a particular answer
 var e=document.getElementById(a);
 if(!e) return true;
 if(e.style.display=="none"){
  e.style.display="block"
 }
 else{
  e.style.display="none"
 }
 return true;   
}</script>

<input type="button"  onclick="return toggleMe('para1');" value="What is Buffalo Ranch?" class="buttonClass"><br>
<div class="button" id="para1" style="display:none" >

    <br>Buffalo Ranch Rustic Home Furnishings is a locally owned and operated retail store featuring a unique collection of ranch and lodge décor, western art, fine antiques, and collectibles. We have a variety of taxidermy mounts, hair on hide leather furniture and other leather goods (bags, wallets, coasters, etc). We also carry beautiful western inspired jewelry, bedding and gifts. We have everything you need to accessorize yourself and your rustic home, except the fresh country air, that is!
</div>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Where are you located?" class="buttonClass"><br>
<div class="button" id="para2" style="display:none" >
<br>
We are located at 123 Main Street in the quaint and historic little town of Nowhere.
</div>
</div>
div id="footer" style="position: relative; width: 100%; height: 125px; top: 966px; left: 0px;">
    <img class="footer" height=475 src="Graphics/Blue%20Footer.png" width="100%"></div>

Obviously there are a lot more questions but I only included 2 to keep it short.

EDIT: http://postimg.org/image/lvw5edn0r/ There's a screenshot of how I have it now. The footer starts low and is static, but it doesn't look right until a question is opened because there is just a bunch of blank space.

Answer 1

Make #questions position as relative, remove height and add min-height:200px (or any other value), remove top property from #footer . Now if you click on any button the footer automatically goes down.

 #questions{ min-height: 200px; margin-bottom: 10px; } #footer{ background: yellow; } 

 <div id="questions" class="auto-style22" style="position: relative; width: 591px; z-index: 8;"> <script type="text/javascript"> function toggleMe(a){ //Collapse all answers var elements=document.getElementsByClassName("button"); for (var i=0;i<elements.length;i+=1){ elements[i].style.display = 'none'; } //Toggle a particular answer var e=document.getElementById(a); if(!e) return true; if(e.style.display=="none"){ e.style.display="block" } else{ e.style.display="none" } return true; }</script> <input type="button" onclick="return toggleMe('para1');" value="What is Buffalo Ranch?" class="buttonClass"> <div class="button" id="para1" style="display:none" > <br>Buffalo Ranch Rustic Home Furnishings is a locally owned and operated retail store featuring a unique collection of ranch and lodge décor, western art, fine antiques, and collectibles. We have a variety of taxidermy mounts, hair on hide leather furniture and other leather goods (bags, wallets, coasters, etc). We also carry beautiful western inspired jewelry, bedding and gifts. We have everything you need to accessorize yourself and your rustic home, except the fresh country air, that is! </div> <br> <input type="button" onclick="return toggleMe('para2')" value="Where are you located?" class="buttonClass"> <div class="button" id="para2" style="display:none" > We are located at 123 Main Street in the quaint and historic little town of Nowhere. </div> </div> <div id="footer" style="position: relative; width: 100%; left: 0px;">FOOTER LINKS <!-- <img class="footer" height=475 src="Graphics/Blue%20Footer.png" width="100%"> --></div>