HTML5/CSS floats display incorrectly with IE7

I'm building a small website for a business. I'm not that well trained in coding. I use the web to troubleshoot often. I have found one error of display only in IE7 that is driving me nutz...lol !!! I'm utilizing HTML5 for rounded corners and shading...

I'm using a "container" div with 3 columns...I float left on the first...float right on the second...and then content for the center...displays just fine in all browsers aside from IE7...the "content" drops halfway down the page? I've used the "clear" function and "display" to no success?

Any ideas for this problem would be greatly appreciated !!!

#container2 {
      overflow: hidden;
      background-color:#fff;
      margin-left:auto;
      margin-right:auto;
      height:auto;
      width:960px;
      clear:all;
}

#leftside {
      float:left;
      margin:10px 10px 10px 10px;
      width:145px;
            border-style:solid;
      border-width:1px;
      border-color:#d7d7ff;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
    border-radius: 15px;
}

#rightside {
      float:right;
      margin:10px 10px 10px 10px;
      width:145px;
                  border-style:solid;
      border-width:1px;
      border-color:#d7d7ff;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
    border-radius: 15px;
}

#content {
      overflow:hidden;
      width:620px;
      margin:10px 170px 10px 170px;
      border-style:solid;
      border-width:1px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
    border-radius: 15px;
      border-color:#d7d7ff;

}