无法将css元素对齐到另一个下面

Question

我正在尝试在我目前拥有的盒子下面制作一个盒子，但由于某种原因，它不会显示在它下面。

正如你所看到的那样，第二个盒子与大盒子重叠，我需要将小盒子放在左边的盒子下面。

这是我的CSS：

.boxResources {
     background-color: #d0e4fe;
     display: inline;
     float: left;
     border-style: solid;
     border-width: 1px;
     border-bottom-width: 5px;
     margin-left: auto;
     margin-right: auto;
     width: 20%;
     padding-bottom: 16px;
 }

.boxTroops {
    background-color: #d0e4fe;
    display: block;
    float: left;
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    padding-bottom: 16px;
}

boxResources是左边的框，boxTroops是重叠的小框。 谢谢你的帮助

我用HTML显示它：

<div class = 'boxResources'></div>
<div class = 'boxTroops'></div>

http://jsfiddle.net/f73XF/

Answer 1

只需添加：

.boxTroops {
    clear: left;
}

Updated fiddle

Answer 2

此处：http://jsfiddle.net/f73XF/11/

.box {
  background-color: #d0e4fe;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 5px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 16px;
  padding-top: 16px;

}

.boxResources {
    background-color: #d0e4fe;
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 5px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 16px;
 }

.boxTroops {
  background-color: #d0e4fe;
  display: block;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 5px;
  margin-left: auto;
  margin-right: auto;
 padding-bottom: 16px;
} 
.col-left{
  float:left;
  width:23%;
}