Results 1 to 3 of 3

Thread: Align div to bottom

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Align div to bottom

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,879
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    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).
    Code:
    <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>
    Last edited by molendijk; 01-18-2017 at 08:16 PM. Reason: Correction

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Vertical align to the bottom of the page
    By d-machine in forum CSS
    Replies: 1
    Last Post: 06-16-2009, 07:09 PM
  2. Resolved How do I align a footer to the bottom?
    By robin9000 in forum CSS
    Replies: 2
    Last Post: 02-05-2009, 06:29 PM
  3. Align to bottom of div?
    By AmenKa in forum CSS
    Replies: 3
    Last Post: 12-03-2008, 11:44 AM
  4. Replies: 2
    Last Post: 11-26-2008, 11:49 AM
  5. Align nested div to bottom
    By agaldesign in forum CSS
    Replies: 1
    Last Post: 05-20-2008, 01:58 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •