Aligning the inline block elements from top - html

Question

How do I make two (or more) floating divs appear like "big buttons" and let them float and be leveled? My problem is that the boxes are "partially leveled"... with one slightly lower than the other. I have tried to use float: left on the adminBox, but then they grow outside the container. Can anyone help me?
I have used this HTML code:
(http://jsfiddle.net/jf936/13/)
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
and this style:
.container{
background-color: light-blue;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
float: none;
text-align:center;
}

Answer 1

This has nothing to do with float, the issue is that you are using display: inline-block; and hence the element are aligned to the baseline, inorder to fix this, you need to use vertical-align: top;
Demo
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
vertical-align: top; /* Add this here */
}
Note: You don't have to use float: none; as nothing is floated here, so you can get rid of those unused properties.

Answer 2

Here you go.
WORKING DEMO
The CSS Code Change:
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
float:left;
}
Hope this helps.

Answer 3

Maybe this code will be helpful for you:
jsfiddle
.container{
background-color: light-blue;
overflow:hidden;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: block;
margin: 5px;
float:left;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
text-align:center;
}
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
</div>