Как сделать изображение выровненным в нижней части страницы?

Question

У меня проблема с моим нижним колонтитулом, я хочу поставить изображение выше, чтобы его нижняя часть была даже с копией правой информации. Я использую HTML 5 и CSS 3, это изображение ниже информации о копировании справа. Я пробовал все, что я могу придумать, чтобы сделать изображение плавающим до того места, где я могу думать, и теперь я прошу вас, ребята, о помощи.

вот мой HTML

<div class="main-footer"> 
<div class="footer"> 
    <article class="contact-us"> 
     <h2>CONTACT US</h2><br> 

     <p>Email: <a href="#"> 
     info@#</a></p><br> 
     <p>Personnel Network Incorporated<br> 
     address <br> 
     address</p><br> 
     <p>Phone: </p><br>      

     <footer class="copyright"> 
      <p>Copyright &copy; 2013 Personnel 
      Network, Inc. All rights reserved.</p> 
     </footer> 

     <img alt="PNI logo" src="Images/pni-logo.jpg"> 

    </article> 
</div> 

А вот устанавливаемому сотовые

.footer { 
    color: #729AA9; 
    width: 70%; 
    margin: auto; 
    overflow: hidden; 
} 

.contact-us { 
    width: 60%; 
    float: left; 
    margin: 2% 3%; 
} 

.contact-us a { 
    color: #1C5ACB; 
} 

.copyright { 
    background-color: black; 
    width: 70%; 
    float: left; 
} 

.contact-us img { 
    width: 230px; 
    height: 80px; 
    float: left; 
} 

Answer 1

Вы можете вертикально Совместите ваши авторские права и изображение на дно, так что нижняя часть авторского права и нижней части изображения вверху:

Обновлен CSS:

.contact-us div { 
    vertical-align: bottom; 
} 

.copyright { 
    background-color: black; 
    width: 40%; 
    vertical-align: bottom; 
    display: inline-block; 
} 

.contact-us img { 
    width: 230px; 
    height: 80px; 
    vertical-align: bottom; 
    display: inline-block; 
} 

Обновлено HTML:

<div class="footer"> 
    <article class="contact-us"> 
     <h2>CONTACT US</h2><br> 

     <p>Email: <a href="#"> 
     info@#</a></p><br> 
     <p>Personnel Network Incorporated<br> 
     address <br> 
     address</p><br> 
     <p>Phone: </p><br>      

     <div class="footer-wrapper-class"> 
      <footer class="copyright"> 
       <p>Copyright &copy; 2013 Personnel 
       Network, Inc. All rights reserved.</p> 
      </footer> 

      <img alt="PNI logo" src="Images/pni-logo.jpg"> 
     </div> 

    </article> 
</div> 

Это фактически переместить ваши авторские права вниз на ту же высоту, что и нижней части изображения (а не перемещая изображение вверх). Если это слишком низко, то вы можете добавить этот CSS:

.footer-wrapper-class { 
    margin-top: -10px; // Set this to whatever amount you want to move them up 
} 

JSFiddle: http://jsfiddle.net/JZW7X/