divs to Float until on next row

I have 4 divs they are each 117px wide and go into a parent div that is at 371px so 3 of these divs will fit side by side with Float=”left”. When the 4th goes to the next row it goes to the left which is what it is supposed to do.

I want 3 divs on 1 row and the next to go centered of the next row.

It is not always going to be 4 divs I am using 4 to test and get the code working the way I want it to because it is 1 more than the max for the first row.

Here is my code.

[code=html]
<div id=”images”>
<div id=”section”>
<img src=”http://www.ideachampions.com/weblogs/american-flag-2a.jpg” onclick=”getText(‘VanessaIntro’)”>
<div id=”SectionTitle”>
Intro
</div>
</div>
<div id=”section”>
<img src=”http://www.ideachampions.com/weblogs/american-flag-2a.jpg” onclick=”getText(‘VanessaOrigins’)”>
<div id=”SectionTitle”>
Origins
</div>
</div>
<div id=”section”>
<img src=”http://www.ideachampions.com/weblogs/american-flag-2a.jpg” onclick=”getText(‘VanessaCulture’)”>
<div id=”SectionTitle”>
Culture
</div>
</div>
<div id=”section”>
<img src=”http://www.ideachampions.com/weblogs/american-flag-2a.jpg” onclick=”getText(‘VanessaAssimilation’)”>
<div id=”SectionTitle”>
Assimilation
</div>
</div>
</div>
[/code]

here is my CSS

[CODE]
#images{
height:50%;
background-color:green;
text-align:center;
}
#images img{
height:88px;
}
#info{
height:50%;
background-color:yellow;
}
#SectionTitle{
width:100%;
font-size:17px;
}
#section{
width:117px;
height:50%;
float:left;
padding-left:5px;
}
[/CODE]

I hope someone can help me out! Thanks!

Also in #CSS _↴