Expanding down? - html

Question

So currently when I add a new entry to my kind of list it goes like this:
[entry] -> [new entry]
and then starts on the line beneath. How do I do so it first fills the first line straight down and then creates a second line and fills that one straight down.
To easier show what I mean. I will give every entry a number and show how it works.
How it works right now:
1 2
3 4
5 6...
And I want it to work like:
1 4
2 5
3 6
Anyone know how I should do?
Code comes here.
HTML
<div id="staffs">
<h5>The Management</h5>
<p>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">Sarah Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">David Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<!--Same boxes are repeated-->
</p>
</div>
CSS:
#staffs {
width: 530px;
height: 275px;
float: left;
clear: left;
overflow-y: hidden;
}
h5 {
text-align: center;
background: #222;
color: #888;
padding: 5px;
width: 510px;
font-weight: bold;
border-radius: 4px;
}
.staff_country {
height: 12px;
width: 12px;
}
.staff_box {
width: 175px;
height: 50px;
margin-left: 5px;
margin-top: 5px;
clear: left;
display: inline-block;
}
.staff_img {
height: 50px;
width: 50px;
float: left;
margin-right: 3px;
border-radius: 4px;
border: 1px solid #BBB;
}
.staff_name {
font-size: 13px !important;
margin: 0 !important;
padding: 0 !important;
padding-top: 2.5px !important;
}
.staff_pos {
font-size: 11px;
color: #777;
}
To see it in action, here is a JSFiddle: http://jsfiddle.net/7MfLU/4/
I would also need some help on how to move the top entries higher up, closer to the titlebar.

Answer 1

Probably the easiest way, since you're just using divs anyway, is to just reorder them in your HTML. You could also create two diva inside staff_box, a left and a right, and put your diva in the appropriate column that way. To move the entries closer to the title bar, change the margin-top to something smaller (you can go negative if you need to).