I am having some trouble with aligning the divs on my page in a column layout. Despite setting the first two divs to float left, the third one does not align properly. I want the third div to be floated right and aligned with the first two.
You can see an example of the issue in this JSFiddle.
The specific requirement is for the .commitment_box div to be floated right in alignment with the other boxes.
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 great at his work.</p>
</div>
<div class="commitment">
<p>Alex 1:</p>
<p>He excels in his role.</p>
</div>
<div class="commitment">
<p>Alex 2:</p>
<p>He consistently delivers top results.</p>
</div>
<div class="commitment">
<p>Alex 3:</p>
<p>He demonstrates exceptional skills.</p>
</div>
<div class="commitment">
<p>Alex 4:</p>
<p>He's a valuable team member.</p>
</div>
</div>