第三列div没有正确定位

我不知道这是否很难解释，但在这里它去..我在我的网页上有多个div，我希望他们来一个列布局。该页面有一个导航栏，一个标志，一些配置文件数据和3个divs。这3个div没有正确对齐。第一个漂浮在左边，第二个漂浮在那之后，所以也漂浮了。我希望第三个能够正确地浮动，但与前两个一致。第三列div没有正确定位

看到这个fiddle。

我想.commitment_box div正好与这些.major_data一致。

CSS：

.major_data { 
    margin: 110px auto; 
    width: 40%; 
} 
.major_data .profile_box p:first-child { 
    border-bottom: 0px; 
    text-align: center; 
    font-size: 20px; 
    margin-top: 0px; 
    background-color: #eee; 
    font-weight: bold; 
} 
.major_data .profile_box p:nth-child(2) { 
    text-align: justify; 
    padding-left: 5px; 
    padding-right: 5px; 
    margin-top: -20px; 
} 
.major_data .profile_box p { 
    border: 1px solid #bbb; 
} 
.commitment_box { /*the div i want to be floated right in alignment with those about boxes */ 
    margin-top: -58.2%; 
    text-align: center; 
    height: 40px; 
    overflow: hidden; 
    background-color: lightblue; 
    color: white; 
    font-size: 20px; 
    width: 25%; 
    margin-right: 2%; 
    float:left; 
} 
.commitment_box .commitment p { 
    display: inline-block; 
    margin-top: 1.5%; 
} 
.commitment_box .commitment p:first-child { 
    font-weight: bold; 
    margin-right: 20px; 
}

HTML：

<div class="commitment_box"> 
    <!--/*the div i want to be floated right in alignment with those about boxes */--> 
    <div class="commitment"> 
     <p>Alex:</p> 
     <p>He's works great.aidhoaishdoaishdoaishdoaishdoaihdoaishdoaishdoasihdoasidhoasihd</p> 
    </div> 
    <div class="commitment"> 
     <p>Alex 1:</p> 
     <p>He's works great.</p> 
    </div> 
    <div class="commitment"> 
     <p>Alex 2:</p> 
     <p>He's works great.</p> 
    </div> 
    <div class="commitment"> 
     <p>Alex 3:</p> 
     <p>He's works great.</p> 
    </div> 
    <div class="commitment"> 
     <p>Alex 4:</p> 
     <p>He's works great.</p> 
    </div> 
</div>

来源

2013-07-15 Mohammad Areeb Siddiqui

这样的样式基本上，你想要一个3列布局？ –

您正在使用边距设置元素的位置。 I.E.major_data {margin：110px auto; 宽度：40％;}我不认为这是很好的解决方案。尝试找到某处3列布局，并从中学习。 –