Align div to bottom

[dmwhipp]

I am working with a new template and trying to learn responsive design. I have been trying to figure out how to align the Donate button to the bottom of the row it's in using position: relative on the parent and position:absolute on the child without success. Here is the page I'm working on: http://www.dwwebdesigns.com/custom/
Thanks,
Deborah

[molendijk]

If I correctly understand you, you want to put the bottom of the donate-button at the same (vertical) position as the bottom of the 'Communties in Schools' when the width of the window is larger than 770px. We can use some lines of javascript together with a bit of CSS that overrides certain of your styles) to obtain this (a CSS-solution might be possible, but that woud imply that we should read all your CSS-lines first).

<header class="margin-bottom" id="margin_bottom" ><!-- Added margin-bottom for spacing -->
<div class="line" >
<div class="box-no-padding" > 
<div class="s-12 l-4"><img id="prob"  src="img/logo.gif" alt="Communities In Schools of Miami"></div>
<div class="hide-s l-6"><img   src="img/surrounding.gif" alt="Surrounding students with a community of support"></div>
<div class="s-12 l-2">
<div  style="float:right; ">
<div class="btnOrange" id="donate_now"  style="max-height: 30px!important; background: transparent"><a  class="btnOrange" style=" position: relative; display: block; min-width: 150px; max-height: 40px; left: 10px; " href="/donatenow.html"><b>DONATE NOW</b></a></div>
</div>
</div>
</div>
</div>
</header>

<!-- At the end of the body section -->
<script>
function position_donate()
{
if(window.innerWidth>=770)
{
document.getElementById('donate_now').style.paddingTop=document.getElementById('prob').clientHeight-document.getElementById('donate_now').clientHeight-10+'px'
document.getElementById('margin_bottom').style.marginBottom='10px'
}
if(window.innerWidth<770)
{
document.getElementById('donate_now').style.top=document.getElementById('prob').clientHeight-document.getElementById('donate_now').clientHeight+'px'
document.getElementById('donate_now').style.marginBottom='20px'
}
}
window.onload=position_donate

var windowWidth=window.innerWidth
window.onresize=function()
{
if(windowWidth != window.innerWidth)
{setTimeout("location.reload()",100);}
}
</script>

[jscheuer1]

As the template linked to in the original post in this thread apparently no longer has a donate button (the positioning of which was the main thrust of this topic). I'm closing this thread. If anyone wants to continue the discussion, please start a new thread.