Two columns and one footer using css

I want to create a robust css style that works whith almost all browser (included IE7, firefox 3) that show me two columns and one footer. I was trying to implement the following code, but I have one problem: A and B are not at the same horizontal level. please halp me to fix the css style.

Click here for the current example.

HTML

<div class="container">
  <div class="left">A</div>
  <div class="right">B</div>
  <div class="footer">C</div>
</div>

CSS

div.container {
    background: no开发者_如何学Cne repeat scroll 0 0 #9999CC;
    margin: 0 auto;
    width: 750px;
}
.left{
    background: none repeat scroll 0 0 #99CC99;
    float: left;
    width: 50%;
}
.right {
    background: none repeat scroll 0 0 #9999CC;
    float: right;
    width: 50%;
}
.footer {
    background: none repeat scroll 0 0 #CCCC99;
    clear: both;
}

---

http://jsfiddle.net/euYTQ/6/

You're missing an s in class.

---

Change <div clas="left"> to <div class="left">.

:)