Another centering DIVs within a fixed DIV question - css

Question

I am attempting a very simple procedure here, basically trying to center the client logos within this main clients div. I've just recently started with this web design business and while I can read some of the solutions out there, I'm having trouble applying them to my structure.
Basically I have a few client boxes, each is going to have a PNG image inside of them:
<div id="clients">
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
</div>
I'd like to be able to center the client-box's on the client's div that has a fixed weight. I've tried using display: inline-block but that didn't seem to do much. I'm assuming that's because I've already forced them to float: left but I don't know how I can maintain their position in the div without doing so. Like I said I'm quite a novice with CSS and this is what I've been doing for all my CSS.
Here's what I have for clients and client-box CSS:
#clients {
background-image: url("img/images/clients_bg.png");
border-bottom: 1px solid #333333;
border-top: 1px solid #666666;
float: left;
margin-top: 120px;
padding: 10px;
width: 778px;
}
.client-box {
background: none repeat scroll 0 0 #bcb546;
float: left;
font-family: verdana;
font-size: 11px;
height: 60px;
margin-right: 10px;
opacity: 0.8;
padding-top: 40px;
text-align: center;
width: 100px;
}
.client-box:hover {
opacity: 1;
}
From my understanding, this shouldn't be hard to achieve, but so far I have not had any luck probably because my brain is fixated on a certain way of doing things and it just won't budge. Any help would be greatly appreciated.
You can see the live site here.
Thank you SO.

Answer 1

I've tried using display: inline-block
but that didn't seem to do much.
float: left forces display: block, so display: inline-block would have no effect.
On .client-box, you need to:
remove float: left
add display: inline-block.
Finally, on the parent element (#clients), you need to add text-align: center.

Answer 2

If your outer div is of a fixed width you can set the margins for the inner div to take up the appropriate space.
eg:
<div class="outer">
<div class="inner">
stuff
</div>
</div>
CSS
.outer { width: 600px; }
.inner { width: 400px; margin-left: 100px; margin-right: 100px; }
Alternatively you can use margin-left: auto; margin-right: auto; however that (like everything else in the world) doesn't work in IE.
Hope this helps!

Answer 3

I will add a wrapper to the client-boxes, whose width is equal to the total width of client-boxes.
For example, in the live site you post above, there are 5 client boxes, and each of them are 100px width with 10px margin-right. So add a div wrapper with width 5 x (100 +10) = 550px, and center the wrapper with "margin-left:auot" and "margin-right:auto".
<div style="width: 550px;margin-left: auto; margin-right: auto;">
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
</div>