Q:

How to center a div and keep the alignment to its nested floating divs?

I have wrapper like div which contains two nested divs. I need them to be centered and I will add content (inputs) dynamically and I need one two be placed at the left and the other on the right side.
I tried:
<div id="matriz">dsg
    <div id="A">ds</div>
    <div id="b">dsa</div>
</div>

With the following CSS:
#matriz {

    padding-top: 20px;
    text-align: center;
}

#A {

    float: left;
    display: inline-block;
}

#b {

    float: right;
    display: inline-block;
}

However the inner divs are then not displayed centered but on the left and right extreme, there's an empty centered space.
I know float: left and float: right is making this. But how would I make it?
I need all divs to be centered all along the screen (viewport?)
Also, the nested divs should be placed together, with no empty centering spaces between them.

A:

Removing the float for #A and #b will make you divs centered in the wrapper. What you  can do to align the two div always next to each other is set max-width for the two divs inside the wrapper div.
Check this fiddle, might help you
HTML:
<div id="matriz">
    <div id="top">Top content</div>
    <div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

CSS
 #matriz {
    width:100%;
    background-color:#ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    overflow:hidden;
    font-size:0;
}

#top{
    width:100%;
    background-color:blue;
    font-size:16px;
}

#left {
    background-color:yellow;
    max-width:50%;
    display: inline-block;
    font-size:16px;
}

#right {
    max-width:50%;
    background-color:green;
    display: inline-block;
    font-size:16px;
}

