Center multiple divs inside another div

I have something like this:

<div id="main">
<div class="tobecentered"></div>
<div class="tobecentered"></div>
</div>

Code (markup):

and i need them to position themselves horizontally like in the pic:


Now, if i float them, they stick to the margin of #main. If i text-align center them, they position themselves one under the other.

Any ideas?

 

solved. i put them inside another fixed width div and centered that one while left floating them.

 

Yes, or you could have added padding to the main div, or margins to the centered ones. It depends if the main div is meant to span the width of a users browser though...