Floating Divs outside Container Div

Question

I am trying to get my 2 menus and info box inside my main container div. When I do so it looks like this.

Problem is when I use float:left they all end up in container but the box is floated all the way to the left instead of centered. Margin has no effect on the floated container. I also tried without float and used overflow:hidden and that has the same effect.

What am I doing wrong? And why will my inner containers not stay inside the red container.

Here is my code for the containers:

#Wrapper {
    border: 10px solid #F00;
    display: block;
    height: auto;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
}
#SidebarLeft {
    border: 1px black solid;    
    clear: left;
    float: left;
    width: 175px;
}
#SidebarRight {
    border: 1px black solid;
    clear: right;
    float: right;
    width: 175px;
}
.Info {
    background-color: #CCC; 
    border: 1px black solid;
    display: inline-block;
    float: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    margin-left: 9px;
    margin-right: 9px;
    padding: 5px;
    text-align:justify;
    width: 640px;
}

Both side menus are floated but the center box is not. If I float it, all 3 boxes end up outside the Red box. I am now totally confused.