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

Question

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.

Answer 1

You can use hack display: table-cell for these 3 elements.

#matriz {
    padding-top: 20px;
    text-align: center;
    display: block;
    width: 200px;
}

#A{
    float: right;
    text-align: left;
    display: inline-block;
    width: 50px;
}

#b{
    float: left;
    text-align: right;
    display: inline-block;
    width: 50px;
}

Fiddle :: full code

Answer 2

Removing the float for #A and #b will make you div s 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 div s 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;
}

Answer 3

Try this http://jsfiddle.net/JP5Eu/

HTML:

<div id="matriz" class="">
    <div id="top">top</div>
    <div id="a">left</div>
    <div id="b">right</div>
</div>

CSS

#matriz {
    position:absolute;

    width:100%;
    padding-top: 20px;
    text-align: center;
    background:red;
}


#a {
    width:50%;
    float: left;
    display: inline-block;
}

#b {
     width:50%;
    float: right;
    display: inline-block;
}

Answer 4

Here is a different option.

http://jsfiddle.net/DrewGoldsberry/JP5Eu/1/

    <div id="matriz" class="">
<div id="CenteredTag">
<div id="a">left</div>
<div id="b">right</div>
   </div>
 </div>

you can put the two tags inside of a container and set a max width. then center that tag.