Center 2 divs(Floating lef,right) in a container - css

Question

I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}

Answer 1

You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.

Answer 2

Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}