How can I center inside containing div, not between right/left fl

[mmseng]

Hi, I've got a containing div (div Z). Inside the containing div are 3 content divs (divs A, B, and C). Div A has text "short" and is floated left, div B has text "whatever", and div C has text "long long long" and is floated right.

My goal is to have div B centered inside of div Z. Currently I am stuck with div B being centered between divs A and C. How can I accomplish this?

HTML:

<div id='Z'>
 <div id='A'>short</div>
<div id='C'>long long long</div>
<div id='B'>whatever</div>
</div>

CSS:

#Z {
 text-align: center;
background: #333;
}
 
#A {
display: inline-block;
float: left;
border: 1px solid yellow;
}
 
#B {
display: block;
border: 2px solid blue;
}
 
#C {
display: inline-block;
float: right;
border: 1px solid red;
}

Sorry for the unreadability. I can't seem to figure out how to get the forum to display tabs or spaces.

Screeshot of current behavior [ploader.net]

Screeshot of desired behavior [ploader.net]

Can someone tell me what I'm doing wrong? My doctype is XHTML 1.0 Transitional.
Thanks,
== Matt

[Major_Payne]

Set a width for the div that you want and use the css property:

margin: 0 auto;

[mmseng]

Thanks for the reply, however div B is currently stretching to fit div Z which has width: 100%. This is the desired behavior.

[mmseng]

Sorry, technically div z is stretching to fit it's containing element, which is what has the width: 100%. But effectively we should assume div Z has width: 100%, to keep things simple.

I should have noted this in the original post.

Correction to CSS:

#Z {
text-align: center;
background: #333;
width: 100%;
}

[Major_Payne]

Can not center divs which have 100% width. To center, must have a width less than 100% within its container.

[Shado]

You need to give your divs width.