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;

}
PCWoesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
IE7 does not calculate dimensions to standard.  It is most likely that the total width of the columns as calculated by IE7 is greater than the width of the container so it drops down to the next available empty area.

Either increase the width of the container until it lines up correctly, or reduce the width of one or more of the contained elements.


Cd&

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
If that does not solve it I think I will need a link to the page to see what it is doing.

Cd&
PCWoesAuthor Commented:
Dropped width of content 10px and solved...thank you...cross browser design is interesting for sure !!!
COBOLdinosaurCommented:
It is much less of a challenge today than it was before there were any real standards. Fortunately the browser manufacturers have finally realized that competing on the basis of standards compliance is a good thing.

Cd&
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.