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 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.