Позиционирование элементов на странице по макете

Question

У меня проблема. Я сделал макет сайта (изображения на картинке ниже. Почти все хорошо, но есть одна проблема: это блок-статья: Когда много текста, кнопка в порядке, но когда текст мало, тогда кнопка перемещается вверх. . Как сделать нормальное позиционирование, и что он не влияет на другое содержимое на горизонтальной линии
мой код: HTML:

<article id = 'article'> 
<section><!--first section--> 
    <h1>This is header of theme1</h1> 
    <p> 
     <img src = "" class = '> Lorem ipsum dolor sit amet.. 
    </p> 
<a href="#"> 
    <input type = 'submit' value = '' class = 'button'/> 
</a> 
</section> 
<hr> 
<section><!-- [n-1] section--> 
    <h1>This is header of theme2</h1> 
    <p> 
     <img src = "" class = '> Lorem ipsum dolor sit amet.. 
    </p> 
<a href="#"> 
    <input type = 'submit' value = '' class = 'button'/> 
</a> 
</section> 
<hr> 

CSS:

article 
{ 
display:block; 
border-left:1px solid #e5e5e5; 
border-right:1px solid #e5e5e5; 
max-width:75% !important; 
margin-left: 25px; 
margin-top:0; 
padding-left:5px; 
padding-top:5px; 
overflow:hidden; 
} 

article section 
{ 
display:inline-block; 
width:100%; 
margin-bottom:50px; 
} 

article img 
{ 
width:350px !important; 
    height:350px !important; 
} 

article .leftText 
{ 
float:left; 
margin-right:5px; 
margin-bottom:5px; 
} 

article section .button 
{ 
background-color: red !important; 
color: yellow !important; 
} 

расположение: http://i.piccy.info/i9/ef5f5f405a91b18a55c34624ca90b0e7/1417550241/11708/837273/Bezymiannyi.png

это проблема: http://i.piccy.info/i9/bf5a07a3bcc684a91e2ef81c224f55c7/1417550761/462126/837273/Bezymiannyi2.png

Answer 1

Я думаю, что это будет исправить вашу проблему:

hr { 
    clear: both; 
    float: none; 
}