Html 按布局在页面上定位元素

我有个问题。我在下面的图片上做了站点布局图。几乎每件事都很好，但有一个问题：这是一篇整篇文章： 当文本较多时，按钮很好，但当文本较少时，按钮向上移动。。。 如何正常定位，并确保它不会影响水平线上的其他内容？ 我的代码：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>

布局：

这是一个问题：

---

我认为这将解决您的问题：

hr {
    clear: both;
    float: none;
}

---

从帮助用户，左附加按钮下的图像这也工作，你能知道，如何移动按钮下的图像？

hr {
    clear: both;
    float: none;
}